Sidebar CSS
-
Hello,
I have just redesigned my blog (which has taken me hours and hours as I’m a newbie) but have a few queries:
1) My home menu button in my nav bar won’t work
2) I want to get rid of the line under ‘archives’ in my side bar
3) I want to adjust the spacing between the items in my sidebar as there’s lots of gaps
4) I want to centre the wordpress follow button
5) I want to get rid of the lines around the Instagram widget images
Any help would be greatly appreciated!
My blog is http://www.daisychainsanddreamers.com
Thanks
The blog I need help with is: (visible only to logged in users)
-
1. This is no longer a problem. I can see the image is linked to home page as well.
2.
#secondary .widget-title { border-bottom: none; }3. There is a bottom margin of .915em coming from your following existing custom CSS. You can reduce the bottom margin a bit.
#secondary .widget { margin: 0 0 .915em }4. Let’s add some left margin to push the button to right.
#follow_button_widget-2 iframe { margin-left: 120px; }5. This style removes the border for the images in the Instagram widget. This is resulting in 2 images per row which looks great, but please let me know if you want them back to 1 image per row.
.widget_wpcom_instagram_widget a img { border: none; }Please try these and feel free to ask for more. Your blog looks great now. Well done :-)
-
Thank you so so much for your help!
1)Could you also advise how to separate the top of my sidebar from the bottom – with the separation between the bloglovin button and the contact heading. With the gap the same width as the space between by sidebar and the main content area?
2)The two ends of my nav banner seem to be connected to my categories drop down menu – I have no idea why?! When I hover over them the menu drops down. How can I fix this?
3)Do you have any idea on how to add a YouTube widget to my sidebar? I’d like a video there which can be played and a subscribe button below.
4) I’d love to pin my nav bar to the top of the page when scrolling down. Is this at all possible?
Thanks again!
-
Another q!
My footer doesn’t seemed to be aligned at the sides – can you see? It’s odd and I can’t seem to fix it.
Also is there a way of positioning the titles above the featured images on my home page?
Thanks
-
I wonder if yours is really the Forever Theme. Very well done customizations :-)
But this also means I did not completely understand how things are working on your blog.
1) I don’t know how to do this. I wonder how you got the separation between main content and sidebar.
2) I either did not understand what you mean or the category dropdown is alright.
3) There is no official YouTube widget and I found some less than ideal workarounds which I don’t recommend.
4) I am fairly sure it is not possible. (I’d be happy to be proved wrong though).
5) Do you mean you want the footer to end at the same level as the main content area ends? Currently footer is extended till the sidebar.
6) I think the best way to position the title above the featured image is to remove featured image and start the post content with the image.
-
Hello,
1) I received help to separate the sidebar so couldn’t say!
2) You see the two flag shaped tips on either end of my navbar? Well when I hover over these with my mouse it triggers the drop down menu to ‘drop’ to display the different categories. Why is this? I must have done something in CSS but can’t work out what.
3) Not to worry about Youtube widget
4) Thats a shame. I’ll keep looking.
5) No. If you look carefully the footer has a jagged edge on both the left and right side. I want the sides to be straight. Any idea?
6) Ah I see. Thats frustrating. I’m not sure though in this theme whether an image would show up at all on my home page if I did this.
Thanks again for your help
-
2) I see what you describe but I don’t know how to fix it :-(
5) Try this style:
#colophon { border-radius: 0 0 0 0; }6) This should be alright because what we are doing is to include the image in the post rather than setting as featured image. But we never know until we try.
-
2) You see the two flag shaped tips on either end of my navbar? Well when I hover over these with my mouse it triggers the drop down menu to ‘drop’ to display the different categories. Why is this? I must have done something in CSS but can’t work out what.
That’s happening because you added the ribbon edges to the menu item and there’s a :hover affect applied to the menu item.
Try replacing this:
#menu-item-4572:before, #menu-item-4590:after { content: ""; position: absolute; display: block; border: 21px solid #B8DCE6; top: .2px; } #menu-item-4572:before { left: -28.71em; border-right-width: .4em; border-left-color: transparent; } #menu-item-4590:after { right: -28.71em; border-left-width: .4em; border-right-color: transparent; top: .2px; }With this:
#access:before, #access:after { content: ""; position :absolute; display: block; border: 21px solid #B8DCE6; top: 10px; } #access:before { left: -27px; border-right-width: .4em; border-left-color: transparent; } #access:after { right: -27px; border-left-width: .4em; border-right-color: transparent; } -
-
pearlsandelephants, it worked in my testing and I just re-tested it at http://daisychainsanddreamers.com/ and it still worked, however, it doesn’t look like daisychainsanddreamers has made the update.
Keep in mind the example CSS here was made specifically for the Forever theme, which is the theme being used at http://daisychainsanddreamers.com/
If you need help with CSS for a different theme, I would recommend starting a separate help request.
-
I’m trying to learn by lurking. When there was no response, my curiosity got the better of me. :) Thank you!
-
- The topic ‘Sidebar CSS’ is closed to new replies.