I'm trying to make a single link in a WordPress top navigation menu that has a different background color but running into some issues.
What I have works on most of my pages but others not (as seen below). I assigned a CSS class (.contact-us-menu) to the individual menu item in the menu builder in WordPress, but I can seem to figure out how to get it to work across all the pages.
Wrong. (https://www.csolsinc.com/insights/)
Correct. (https://www.csolsinc.com/insights/webinars/)
This is the custom CSS I added with the "Wordpress Add Custom CSS" plugin.
li.contact-us-menu {
background-color:#f47e00!important;
height:50px!important;
border-radius:50px!important;
padding-right:15px;
color:#ffffff!important;
font-weight:bold!important;
vertical-align:middle;
}
li.contact-us-menu a {
color:#ffffff!important;
}
Any advice?
I looked through both of your site pages to look for the differences and I am seeing this line affecting the 'wrong' links:
#top-menu .menu-item .dropdown-toggle {
position: relative;
top: 11px !important;
For a fix, with your I would either change the top to -1px as in your 'correct'
or try to add:
li.contact-us-menu {
line-height: 50px;
}
to your css.
I'm currently building a website as a whole sale website. I'm having trouble getting a PNG to work as a button. WP Ecommerce comes with an automatic "add to cart" button on all of their pages. I'm having the hardest time figuring this out. I did this to my directory so far.
changed a custom "add to cart" PNG to the images directory.
Went to the default.css page and changed:
input.wpsc_buy_button{}
to:
input.wpsc_buy_button{
background-image: url(images/addtocart.png);
}
I don't know exactly what Im doing wrong. Maybe I didn't echo it on the product page? I feel like it should have because I kept the names the same.
Either way, any form of help would be awesome. Thanks!
A few things to note:
The class, wpsc_buy_button, is on a button, not an input.
The CSS that is putting the button in there now uses an !important tag so you must also use this and be more specific with your selector to override that style.
images/addtocart.png is not going to be a valid path to images in your media library. I'm not certain where it lives but the path is more likely to be something like this: http://inkvia.com/wp-content/uploads/2015/01/addtocart.png
Example CSS
button.wpsc_buy_button {
background: url(/wp-content/themes/mazine/images/addtocart.png) no-repeat !important;
height: 43px;
width: 180px;
}
button.wpsc_buy_button span, button.wpsc_buy_button span span {
background: none!important;
text-indent: -99999px;
}
I am working on a WordPress site and there is something that I just can't figure out no matter how hard I try. I want to have a grid similar to this (http://www.elegantthemes.com/gallery/origin/) but more like this: (http://themeforest.net/item/hercules-portfolio-business-wordpress-theme/full_screen_preview/5124743). You'll see that in the hercules theme the grid is only at the top of the page. I want to do something similar to that at the middle of the page. Unfortunately I cannot switch themes to get that one function. So I wanted to know how I would create my own version. Can someone point me in the right direction?
P.s. the grid does not need to have any fancy zoom animation and doesn't even have to be linkable. Just static pictures like that in a grid of 4x2. No spacing or padding or margins between the images. And I contacted the designer of that theme and he mentioned that it is not a plugin that does it. It's custom CSS3. He wasn't any more helpful then that though :/
I'd use an unordered list to contain the images, float the list items and apply a 25% width. The images then need a 100% width, and max-width 100% and height: auto a for responsive layout. The images you upload would need to have the same height dimension (or you could set a fixed height on the list items, but risk losing some image content).
ul#picture_grid {
list-style: none;
width: 100%;
overflow: hidden;
}
#picture_grid li {
float: left;
width: 25%;
}
#picture_grid img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
I'm working on a site here:
http://www.jasnasyogaonline.com/membership-test.php
And if you hover over the right nav, you'll see a fade in effect that happens where the background animates to the top and bottom from the middle of the link. In between the three colored lines (the border of the right nav) you'll see that there is white color. This is because on the other pages of the site, the background is white and the original programmer just used a background image to create the 'diagonal' edge of the nav item. Now that there is a full page video/image, this doesn't work because the background isn't white and the effect is lost.
My client is now looking to just have it be transparent between the razor lines but keep the nav items with the diagonal edges. If I removed the images on the end of the nav item, they just become straight rectangles. I've tried some CSS with borders/border-widths, etc. but it's a little tricky because if you look at the source code, the background is being generated by a PHP file that's using imagecreatetruecolor to create the hover effect.
Any ideas on how to cut the corner off of the right nav while keep the area between the razor lines transparent? I'm beginning to run out of ideas. Thanks for your help!
My suggestion would be to drop the hover edge div all together
.nav ul li div {
The recode the animation using a background sprite / animation. In reality I don't really like the mouse over effect at all. Maybe you could sell the customer on something that is easier to do like a text outer glow or an underlining effect.
Also: this post doesn't have anything to do with PHP
EDIT I can't think of another way this can be achieved but you can try if you want this design.
.nav ul li a:hover {
color: #FFFFFF;
text-decoration: none;
-moz-border-radius: 10em 0em 10em 0em;
border-radius: 10em 0em 10em 0em;
text-align: center;
}
I have wordpress sidebar with:
<h3 class="widget-title">TITLE OF SIDEBAR</h3>
and I need show small icon before "TITLE OF SIDEBAR. Can I do with CSS?
Or I must manually add image into code? like:
<h3 class="widget-title"><img src="">TITLE OF SIDEBAR</h3>
Pseudo elements will do what you want. Using the :before pseudo element, your CSS would look like this:
h3.widget-title:before {
content: url('/path/to/image');
}
This will place an image before the text content of the <h3>, however this won't change the DOM at all which is important to note.
A good explanation of how pseudo elements work can be found here, on CSS Tricks.
If your image is 10px wide, you could try this:
.widget-title {
background: url(smallicon.png) left top no-repeat;
padding-left: 10px;
}
Keep your h3 tag without including img tag, and do the following:
h3.widget-title {
position: relative;
padding-left: <width of the icon image>;
}
h3.widget-title:before {
content: '';
width: <width value>;
height: <height value>;
position: absolute;
left: 0;
display: block;
background: url(<path of the icon image>) no-repeat;
}
.widget-title:before {
content: url(path/to/image.png);
}
You can find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/content.
h3:before {
content: url('https://www.google.com/images/srpr/logo4w.png')
}
Sample http://jsfiddle.net/KCXVM/
Yes, you can do it in CSS.
Simply use the :before pseudo-selector, like this:
widget-title:before {
content:url('imagename.png');
}
Or, of course, use h3:before { ... } for it to apply to all h3 elements.
Here's a working example for you
Browser compatibility: This works in all common browsers, except IE7 or earlier.
Why not simply apply the image as a background?
.widget-title {
background: url(...) no-repeat 50% 0;
padding-left: 20px;
}
So, at first, I thought a <span> thing would work.
Then, I tried this, and it worked seamlessly:
h3:before{
content: url('your url');
}
You can add icon before each h3 heading in CSS by following these ways below (via OIW Blog):
- Use Glyphicons of Bootstrap
If you are using Bootstrap then you can use Glyphicons to add icons to the desired title or text.
Bootstrap contains a diverse set of icons, to pick up a suitable icon you can take a look at here: https://getbootstrap.com/docs/3.3/components/. Once choosing a desired icon, adding it to theme is a piece of cake. You just need to add the card after the location that you want your icon to be displayed
<span class="glyphicon glyphicon-ok"></span>
Notice that the icon I added is “ok” so its class shall be “glyphicon-ok”. Each icon (in the list I mentioned above) is compatible to a different class.
- Use icons of existing Cheatsheet of the currently used Font or third party
If your website don’t use Bootstrap or the current set of icons of Bootstrap doesn’t meet your need (despite containing a lot) (Glyphicons of bootstrap has displaying errors on IE10 of Window Phone OS). After that you can check what font of the website you are using is and find out if it has an icons Cheatsheet library or not. For example: Elusiveicons, Fontisto, Material Design… are some of the fonts that have icons Cheatsheet which are for immediate use.
If your currently used font of the website has Icons Cheatsheet then you can have a set of icons of the third party. Here I would like to introduce “Font Awesome Icons”. This is a good-looking and popular set of icons.
To use this set of cons, you need to add this code to the head section in your website:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
– After adding CSS, you can use this code to put in the HTML which shows icons (you can apply this method to the part you use Cheatsheet of the font as mentioned above. Some fonts have unique way of using)
<i class="fa fa-edit"></i>
– If you don’t want the code in the HTML, you can just use CSS. With CSS you need to find the Class or ID of the part that displays icon and after that use the below CSS code to display it. Here I display the EDIT icon of the third party “Font Awesome Icons” before (::before) the title, along with 2 properties of padding-right and font-style (you can also display it after the title by using after property):
span.last-updated-time::before {
font-family: "FontAwesome";
content: "\f044";
padding-right: 5px;
font-style: normal;
}
Notice: the code of content is hexadecimal code. You can find and replace it with the code of the currently used icon. With “Font Awesome Icons” you can find it here: https://fontawesome.com/cheatsheet