sidebar css
-
can css customization be applied to sidebar widget
The blog I need help with is: (visible only to logged in users)
-
Yep! What sort of changes do you want to make? If you need help, I’m happy to give you a hand. :)
-
I’m trying the have text or background change color with the current page. And to get the sidebar to travel with text as the user scrolls
-
Can you give me a few more details about this change you want to make? I’m not quite sure I understand.
I’m trying the have text or background change color with the current page.
-
I’m trying highlight the current page in navigation to tell users where they are now, using a sidebar menu I created in a widget. I would also like this sidebar menu to be persistent as the user scrolls. Whenever I make a change in css it doesn’t affect the widgets. Can I create a sidebar navigation w/o a widget or can I change the css in the widget? thanks!
-
CSS changes will apply to widgets just fine. If you could paste the CSS you’re adding, I’m happy to have a look.
-
here is my code:
secondary#menu-menu-4 a#menu-item-226,
secondary#menu-menu-4 a#menu-item-223,
secondary#menu-menu-4 a#menu-item-224,
secondary#menu-menu-4 a#menu-item-225
{
color: #514536
text-decoration: none;
}thx!
-
Hi there, the selectors you have used need some adjustment. secondary is a CSS id, so it needs a # in front of it. The second thing we need is the unique CSS id for the menu item, which will again start with a #. And then we need to include the “a” element, so things would look like this.
#secondary .menu-item-226 a, #secondary .menu-item-223 a, #secondary .menu-item-224 a, #secondary .menu-item-225 a { color: #514536; text-decoration: none; }When you see a CSS class in the HTML, it will always start with a period ( . ) in the CSS. A CSS id will always start with a #.
See how the above works for you and let us know.
-
Thank you! I realized that what I was doing was not what I was trying to achieve. I’m actually trying to get the links that correspond to a current page to appear in a different color.
So I found the WP generated class selector for the pages I want to be highlighted in the corresponding links and added those class selectors to my sidebar links (using the text widget) and then added the css properties for those selectors and still not working. Please see current attempt below:
body.single single-post postid-62 a.single single-post postid-62,
body.single single-post postid-47 a.single single-post postid-47,
body.single single-post postid-84
a.single single-post postid-84 {
color:#514536;
} -
Are you talking about the links in the menu or the post title on the posts themselves? Can you point me to an example and let me know exactly what you are wanting to change?
-
Hi, Thanks for asking. I actually wanted to change the color of the links listed in the side navigation table:
Home: Navigation
Innovation
Human Capital
Challenges and Pressures -
Hi and thanks for the clarification. First off, I would suggest changing the following rule
to this#secondary { position: fixed; right: 10%; z-index: 100; }which keeps the menu from overlapping the content on some screen widths.
On the color of those menu items, since you have done them in a table within a text widget, I would suggest the following code to change the colors.
#text-9 h5 { color: #514536; }See what you think and then let me know.
-
-
For the color change on the menu items, I think I might not have been clear. I’m trying to change color of the menu item to change as an indicator that the user is on the same page as the menu item or highlight current page rather. Since I can’t add a unique id to the body tag of each page I want to highlight in the menu, I tried to find the id on the existing body tag and added it to the “a” attribute of each menu item. Then used the attempt listed in my earlier post in the the stylesheet. Am I on the right track?
body.single single-post postid-62 a.single single-post postid-62,
body.single single-post postid-47 a.single single-post postid-47,
body.single single-post postid-84
a.single single-post postid-84 {
color:#514536; -
Because you have created this with HTML in a text widget, we don’t have the option to highlight the current page. In our menu systems, when someone is on a page, there is a CSS class inserted into the menu item code that allows us to set the current page item colors.
My suggestion is to create a Custom Menu and then use the Custom Menu Widget. You can then use the Widget Visibility feature to have it show only on those particular pages. We can then customize the current page item colors as you desire.
-
Hi,
I’ve switched to the custom menu and have it set to show only on the pages I want. What is the best way to customize the menu items to change colors once user is on corresponding page or current page rather?thanks!
-
Hi, right now you have the menu widget set in Visibility to only show on single “Post” pages. If you wish to only show the menu widget on post pages, then the following CSS will allow you to set a current page item color.
.single .current-menu-item > a { color: #cc0000; }I also noticed on smaller screens, since the text in the menu is set in the CSS to “justify” it looks strange. Screenshot: https://cldup.com/quxFWkooaU.png
Add this to set the menu back to left alignment so the links don’t look weird on smaller screens.
#nav_menu-5 ul { text-align: left; }Let me know if you also want the menu to show on other pages.
-
-
I have a separate question. I’m trying to upload or insert link to svg images that I want to feature and expand on the site. It was suggested that I use cloudup to house the .svg images and insert the link in the text, with img markup. But the images won’t render when I do that. Suggestions?
-
Can you give me a link to one of your images and let me work with it a bit? I’ve not tried anything with SVG images yet, but I would certainly take a look.
- The topic ‘sidebar css’ is closed to new replies.
WordPress.com Forums 
