The template is here:
http://foundation.zurb.com/page-templates4/marketing.html
I downloaded this template and one by one downloaded foundation.css, normalize.css and the custom.modernizr,js
The top bar seems to work fine.
I ran updates on the zurb-foundation and compass gems and created a new compass project.
Now when I take that working template and move it into the fresh compass project, update all the paths and change the linked stylesheet from foundation.css to app.css, the dropdowns no longer work on the expanded top-bar.
I have made no edits to any scss or css code. The only edit is changing the link from foundation.css to app.css. These should be the same right?
My workaround is to include both foundation.css and app.css, but this seems like a lot of unnecessary duplication - and it's making it very difficult to tweak the styling.
The files can be viewed at:
http://www.t4dev.com.php53-3.dfw1-2.websitetestlink.com/transparency/
Your should use the right markup or the js won't work.
Look at the docs http://foundation.zurb.com/docs/components/top-bar.html and use the sample markup to test if it works.
The template you showed uses a valid markup for the top bar.
Hope that helps :)
Related
I am working on a template generated from VS 2017 Community for Python/Django web application.
I can't seem to get the CSS to work.
I looked at the page source and it is referencing the correct style sheet.I
adding a class (class="test") to to h4 in the .html file so that I can target it through the CSS
in the site.css I have .test{
`color: red;'
}
background, I started by trying to add a "tooltip" to this sheet. When that didn't work I went back to a simple manipulation just to see if I could get that to work.
Please let me know if you need other code snippets!
other aspects of the code work as expected it's just styling that is giving me fits.
Pretty new at this so please be just a little forgiving! :)
I wonder if maybe classes and id's from a template are not influenced by site.cs?
Turns out, there is a difference between hitting refresh in the browser and ctrl + "r". Ctrl + "r" refreshed the page (without cache i'm guessing) and the changes I made were displayed.
I added a custom.css file to the "content" folder under "app" folder.
I then added a link to that sheet in the "layout.html" file
I can see my changes now.
Might be a beginner mistake but at least I can move forward now.
I was able to resolve this. "control" + "r" helped.
all my CSS seems to be working now.
Thanks fo responding Arturo.
I'm trying to find a nice looking bootstrap slideshow that looks similar to this one: https://www.jssor.com/demos/simple-fade-slideshow.slider
I would use the one in the link but it's got way to much Javascript and doesn't respond properly when I change the size of my window. Any ideas how I could create this using Bootstrap, HTML and CSS only? So it still needs to be automatic as well.
Thank you
It’s the carousel you’re after, without knowing which version of bootstrap you’re on I cannot provide an example but you can find full examples for what you need in the bootstrap docs: https://getbootstrap.com/docs/4.1/components/carousel/
I am using a theme called Hemingway, it's a great theme with three page layouts. (full-width, with sidebar, without sidebar). This is all working great. I can choose one of three options in page settings.
I'm also using the Projects plugin by Woothemes. This plugin makes it easy to add recent projects with a photo gallery and some other options. It's working when I'm using the shortcode:
[projects limit="12" columns="2" orderby="date" order="desc" exclude_categories=""]
I'm using this shortcode with two columns on a full-width template. This is working great, but when I'm trying to use the functionality to automatically add the content of projects to the page using the option built-in Projects:
The full-width template is not working and the sidebar is shown. Also the two column layout for projects is not working. They just aligned beneath eachother.
How it should look like (this example is with shortcodes):
http://hoveniersbedrijfameland.nl/projecten/
How it looks with the option in projects to choose a page: (this is wrong)
http://hoveniersbedrijfameland.nl/projects/
How can I debug this to see what breaks it?
What I tried so far:
I've tried the plugin to behave like I want. This means, that the
plugin will use the full page template for 'categories' instead of
using the archive page. I don't really know how the plugin is build,
so it's hard to eit the right file.
I've tried a workaround with url routing, but this isn't the best
approach.
I found a solution. I copied the archive-project.php file to my theme and edited the content with the ones in the full-width template. I need to style it myself because the pages are broken if I leave it like that.
If I want to edit page template now, I need to code it in the ffile instead of choosing it from the pages > page layout in the admin panel.
I'll fix that later.
FINAL UPDATE: I hardcoded everything and it's working for me now. I don't need any further help, I'm now looking into the custom post types to change the content template.
I am using Joomlart.com's JA_ORISITE template for my site, Everything works perfect except the css, It might be a feature of the template to maintains its original design, but This feature is a big hurdle for me. I have changed the css of the template as per my requirements, but every time I load or install a new module or plugin in to my installation, Default css is being loaded automatically, so Every time I need to fix the css as per my requirements and this frustrates me....
Glad to see any possible solution.... :)
T3 framework uses LESS to compile the CSS being used by the template. LESS is recompile for a multitude of reasons and it sounds like installing a new extension is one of them. When LESS is recompiled, you will lose any edits you have made to the CSS.
In order to made CSS edits that are not overwritten by LESS you have to put any custom CSS in custom.css. The template is configured not to touch that file so your changes are not lost.
Documentation is here - http://t3-framework.org/documentation/customization.html#custom-css
What file did you edit to make your customizations? I'm guessing you edited one of the included CSS files in the template. Your best bet is to make a new custom.css file and add that to the css being loading in index.php.
I like the IntelliJ 'live edit' feature but it doesn't work for Django templates because obviously they are just a bunch of variables and its not finding the CSS files. Is there some way of working 'live' on Django templates? (or any other templating system for that matter).
Similarly I tried to use Chrome devtools autosave but it also didn't work, presumably it wants me to open an html file locally (i.e. file://).
And using chrome inspector to edit stuff is a pain because you have to copy and paste your changes - unless I'm missing something?
I am using IntelliJ 12.0.4 Ultimate with the Python plugin (this is more or less equivalent to PyCharm) to work on Django templates. It doesn't look like the Live Edit functionality works as per usual, indeed because the template has to be rendered to HTML first by Django.
One alternative is to assign a keyboard shortcut to the "View | Reload in Browser" menu item.
Another alternative is to use a Chrome plugin such as ChromeReload: You can set this to reload a specific page at a specific interval.