CSS with Reddle theme
-
I have a few questions I need help with on my site please.
1. how can I move my tagline below my header?
2. how do I change the colour of my navigation bar white and its text dark grey?
3. How do I centre my sidebar titles and make them dark grey?
4. How can I get rid of the background stripes?
5. How do I center the follow buttons on my sidebar?
6. How do I move my sidebar to the left?Thanks
The blog I need help with is: (visible only to logged in users)
-
Hi there,
1. how can I move my tagline below my header?
Given that this is a responsive width theme and the header and site-title/tag line is not in the same parent div, I would suggest creating a new header image and incorporate the tag line into the header image.
I would also suggest leaving the tagline in at Settings > General and also adding the site title back in there and then use the following CSS to hide them. That way the site title and tagline are there for the search engines to find.
#site-title, #site-description { display: none; }2. how do I change the colour of my navigation bar white and its text dark grey?
3. How do I centre my sidebar titles and make them dark grey?5. How do I center the follow buttons on my sidebar?I see you have gotten 2, 3 and 5 accomplished.
4. How can I get rid of the background stripes?
To remove the background image in the body, add the following CSS.
body { background: none; }6. How do I move my sidebar to the left?
Give the following a try and see what you think.
#main .widget-area { float: left; } .secondary #primary { float: right; } #main .widget-area .widget { margin-left: 10%; } #secondary { border-left: none; } .secondary #content { margin-right: 42%; } -
Thank you so much you won’t believe the amount of hours I have spent over the weekend solving these problems. Have a couple more questions please.
1. how can I reduce the size of the left hand sidebar?
2. how can I add social media icons above the search bar? I am after facebook, pinterest and twitter icons.
-
And another little one the comment box in the tope right hand corner is missing a bit off it, which appears when you hover over it, how can I have the whole thing showing when static?
-
And another little one the comment box in the tope right hand corner is missing a bit off it, which appears when you hover over it, how can I have the whole thing showing when static?
I’m not quite sure what you’re seeing here – mind posting a screenshot so I can get a better understanding of the problem?
Here’s a guide on how to make a screenshot, if you’re not sure: http://en.support.wordpress.com/make-a-screenshot/
You can upload the screenshot – in a graphic format like JPG, PNG, or PDF – in your Media Library so I can see it. Thanks.
-
2. how can I add social media icons above the search bar? I am after facebook, pinterest and twitter icons.
Here’s a guide on how to do that:
http://en.support.wordpress.com/add-social-media-buttons-to-your-sidebar-or-footer/ -
1. how can I reduce the size of the left hand sidebar?
The sidebar width is set via this CSS:
#main .widget-area { margin-right: 9.46429%; width: 33.5714%; }You can try overriding it by adjusting those percentage values.
-
In the top right hand corner of each post I have what looks like a bright blue square if you hover over it it turns into a speech mark, how can I make the speech mark appear the whole time without hovering over it?
-
The side bar worked great thanks, how can I now move over the posts closer to the sidebar? And thanks for the link on how to add social media icon, I will give that a read.
-
how can I make the speech mark appear the whole time without hovering over it?
Can you give this CSS a try:
.comments-link a:before { border-left-color: #28F0E2; }Let me know in case you were referring to something else :)
The side bar worked great thanks, how can I now move over the posts closer to the sidebar?
This should do the trick:
.secondary #primary { margin: 0 -30% 0 0; } -
-
I want to add the second sidebar to the right, how would I do this. And I still can’t get the speech graphic to stop hover.
-
Speech mark thing didn’t work =[. Posts worked perfectly thanks =D.
I added that code and it seems to do the trick. Here:
http://pasteboard.co/KFgrKbB.pngWere you talking about something else? Just let me know :)
I want to add the second sidebar to the right, how would I do this. And I still can’t get the speech graphic to stop hover.
Seems your theme doesn’t support a second sidebar, and it isn’t possible to add one using CSS. We can only use CSS to change existing elements, but not to add new ones, unfortunately.
-
My theme does support a second sidebar will add one now so you can see. I want the main one on the left and the second one on the right, so there is a sidebar on each side please.
-
Hi there!
Sorry for the delay! The Reddle theme’s two sidebars are stacked on top of each other. This type of change can be really complicated, but here’s what I came up with on my test site:
.secondary #primary { margin: 0 0 0 23%; float: left; width: 57%; } .secondary #content { margin-right: 0; margin: 0 4.5%; } .secondary footer .permalink { left: -10%; } #main .widget-area { width: 15%; } #tertiary { border-right: 1px solid #ddd; margin-right: 0 !important; margin-bottom: 3.6em; margin-left: 0 !important; width: 20% !important; } #tertiary .widget-area { float: right; margin-left: 9.464285714286%; } #tertiary .widget-area .widget { margin: 0 20% 0 0; } #tertiary aside { margin: 0 20% 0 0 !important; } #secondary { position: absolute; margin-right: 0 !important; } #secondary .widget-area .widget { margin: 0 0 0 20% !important; }You may need to tweak some of those numbers still. And feel free to ask me about any of those sections if you can’t figure out what they’re doing.
You’ll probably need to add some specific edits for the tablet view. You can learn more about using media queries that target certain screen sizes here:
http://en.support.wordpress.com/custom-design/custom-css-media-queries/
Hope this helps! Let me know if you have any questions!
-
No worries about the delay, it was sooo worth it, it has worked perfectly thank you so much. Would hug you if I could, lol. So happy!
-
Theres a line on the right hand side of the second side bar, how do I get rid of that please?
-
-
No worries about the delay, it was sooo worth it, it has worked perfectly thank you so much. Would hug you if I could, lol. So happy!
I’m so glad you’re happy with it!
Theres a line on the right hand side of the second side bar, how do I get rid of that please?
Just remove this line under the #tertiary tag:
border-right: 1px solid #ddd;Another little question, what is the width length of the second sidebar please?
The width of both sidebars are set by this segment of code:
#main .widget-area { width: 15%; }Using percentages instead of a set number of pixels allows your site to be responsive and fit on both small and large screens. If you’re going to change this width, you’ll also need to edit the width of the main content. (The width of the left sidebar + the width of the left sidebar + the width of the main content can’t be greater than 100%.) The width of your content area is set here:
.secondary #primary { width: 57%; }It can take a little trial and error to fully understand how this works, so go ahead and change the numbers around a bit if you want!
If you only want to edit the width of one of your sidebars, you can add the ‘width’ tag into either #secondary or #tertiary. You may need to add the ‘!important’ tag to the line, like this:
width: 17% !important;Does that clarify things? Let me know if you have any other questions! :)
- The topic ‘CSS with Reddle theme’ is closed to new replies.
WordPress.com Forums 
