I want to add a background image for the link from top navigation which is associated with the current page that the visitor is viewing right now.
Basically the idea is to have different background image for the navigation menu link for active page.
How can I do this?
Magento adds specific class names to the body class based on what page you are currently viewing. The login page, for example, will have a body tag with class 'customer-account-login'. You can simply target that class to do your styling in the usual way:
.customer-account-login .header .links li {
background-image: url('../images/some_background.png');
background-repeat: no-repeat;
}
I found a great tutorial on this which is very useful and that did the things what I wanted.
Here it is.
Related
I'm developing a WordPress theme from scratch for the first time, and I just created a custom widget for the footer that contains the contact info for the site. I'm using Flexbox for the layout of up to four footer columns, and I want the column containing this custom widget to have flex-basis: 2; so that it's wider than the others at times.
How can I add a class name to whichever column the user places the custom widget in?
EDIT: I said flex-basis when I meant flex-grow.
Rather then add a class to the column, maybe the best thing is to find the name of the class that is already there, and then add the CSS code.
To find the class:
Using Chrome, inspect the element. In the console window, it will show what the class name is.
Then go into your Dashboard > Appearance > Editor and add your custom css code.
For example, on of my websites,
I used the left sidebar for widgets and dropped in some generic widget boxes in there. I used css to add the style i wanted. So for the titles, I wanted them to look like blue boxes with white letters. The code looks like this:
.widget-title {background-color: #004165; padding: 5px; color: #ffffff; margin-bottom: 15px;}
.widget-title {color: #ffffff !important; font-weight: normal !important;}
I'm currently making a WordPress page and for some reason when the menu collapses all the menu items with children stop working. I don't know any JavaScript (yet) or really anything more than basic HTML and CSS so I'm a little over my head trying to figure out why this is happening. I've tried going into devtools to make sure the href is still there and it is so I'm not sure what else to look for at this point. Any suggestions would be awesome.
The site is here.
Your child menu items seem to be working fine when the nav is collapsed (on mobiles etc). The child link item are set to display:block!important when collapsed which is why there are appearing all the time, and not just when the parent is hovered over, like on desktop screen widths.
If want the child links to appear only then the parent is selected, then try removing display block from your style.css as below. Personally I think it is more useable as it is though.
#media screen and (max-width: 991px)
ul.slicknav_nav ul {
position: relative !important;
top: 0 !important;
left: 0 !important;
}
Apologies for the novice question; I am new to Wordpress and PHP.
I've been using the following:
<?php echo do_shortcode('[shortcode]')?>
to display a shortcode. My problem, however, is that, as the icons act as pointers to other webpages or protocols (like email), they are displayed as an icon with an underline beneath them.
I still want them to point to somewhere but I don't want the underline to be visible. Looking in the CSS files for the plugin itself, it does have
text-decoration: none;
but this doesn't seem to affect anything. Wordpress also states that the stylesheet for the plugin is inactive. I'm not quite sure how to add a class to this effect for the anchor on the primary stylesheet (i.e. for the webpage itself) but I was hoping that would be the solution.
try
text-decoration: none !important;
you need to use this css for a, a:active, a:hover, a:focus links class.
I have 2 pages for my site. One a forum, another is my homepage. I have the homepage all setup, but the forum will require a bit of modification to the nav bar. I have the nav bar from the homepage mirrored to the forum so that the styles match nicely, but I made the forum wider because the forum needs more space for content and tables. I have tried numerous times to do this, to no avail.
Since the forum is not a static page, I have put the homepage on JSBin instead. They both use the same exact nav bar. This is Bootstrap 3, by the way.
Here is what I want it to look like (sorry for not embedding in post, need 10 rep): http://i.imgur.com/dlXaOZ8.png
Here is the JSBin: http://jsbin.com/fexowifica/1/
I just need to know how to make that extend out wider like seen in the image, but it won't actually be applied to the homepage nav bar, it will be applied to the forum nav bar that is seen in the image.
Thanks!
just update your css
CSS
#media screen and (min-width:768px){
.container{
width:100%;
}
Is there any module/plugin to show thumbnails only in homepage?
In my article page I'll upload many images but i want to show a different image when this article will be shown in homepage.
You can do it with a CSS class applied to the thumbnail e.g. on a Front page or a Category Blog listing which shows the text before a "Read More..." link we show a small thumb.
On an actual article page though the only the main image is visible as the CSS hides the thumbnail on article pages. Obviously depending on your Joomla! you will have to use the appropriate selectors, I've included an example from a site we have in development.
The CSS for the Featured/Blog pages:
div.featured .blogthumb, div.blog .blogthumb, #tinymce .blogthumb {
display: block;
}
The CSS above includes the #tinymce id, so that the thumbnail is still visible in the editor after applying the .blogthumb class to the image.
While the CSS for the rest of the site looks like this:
.blogthumb {
display: none;
}
As mentioned before this CSS is specific to the template we're using - you will have to investigate the equivalent ID's or classes for your template.