-
AuthorPosts
-
January 20, 2016 at 4:16 pm #568712
I am using the Enfold Theme, and I cannot see anywhere to change the background or add a border to the sidebar widgets.
I found this response (https://kriesi.at/support/topic/widget-border/) on an old comment but it doesn’t work for me – when I enter this code into the General Styling Quick CSS section, nothing happens when I save & then refresh my blog page (and yes, I’m pasting the code into Notepad first just in case it’s got any additional formatting that Enfold wouldn’t recognise – still no joy).
I went looking at the .css files in my hosting, but there are so many that reference widgets that I didn’t even know where to start!
If someone could advise what code I should use & where exactly it needs to go, that would be great (bearing in mind the code on the support link above doesn’t work for me for some reason – my Enfold is up to date).
Many thanks,
Nikki
January 21, 2016 at 5:59 am #569160Hi Minxywitch,
Please try the following in Quick CSS under Enfold–>General Styling:
.sidebar .widget { background-color:#ddd !important; }
Best regards,
Rikard- This reply was modified 8 years, 11 months ago by Rikard.
January 24, 2016 at 9:10 pm #570894Thanks Rikard,
That does work, but the margin of the newly grey area doesn’t go to the edge of the widget section. So it looks out of place, and still doesn’t separate the widgets properly (I’ve attached a screenshot): http://nikkistephens.com/wp-content/uploads/2016/01/Widget-example.png
What would the code be to put a background just on the widget titles (so in my example attached, a background just for where it says Recent Comments and then Purple Minxy Witch)? Or even a border just around the title or just underneath the widget title?
Many thanks,
Nikki
January 25, 2016 at 8:57 am #571151Hi,
Try the following as well:
.inner_sidebar { margin-left: 0px !important; } .sidebar .widget { padding-left:30px !important; }
Regards,
RikardJanuary 28, 2016 at 10:33 pm #574146Hi Rikard,
So now the code looks like this:
.sidebar .widget {
background-color:#ddd !important;
}
.inner_sidebar {
margin-left: 0px !important;
}.sidebar .widget {
padding-left: 30px !important;
}However, it hasn’t actually changed anything – the grey background still doesn’t go the whole way across the sidebar section – it still looks the same as the previous screen shot.
Is there a way to just put the background on the titles of the widgets, as at least that would help to differentiate the sections (ie the separate widgets)?
Many thanks,
Nikki
February 1, 2016 at 7:52 pm #575989Hi!
The code Rikard provided you is correct but the below code on your site is over writing the new styles
.sidebar .widget { background-color: #fff !important; }
Please provide admin access for us to login and check your site with permission to add new css.
Regards,
VinayFebruary 27, 2016 at 9:32 pm #590297Hey guys,
I’m having the same issue. The grey color I want to fill the right hand sidebar is only partially filling.
Here’s the code I used in the general styling (quick css) section:
.sidebar .widget {
background-color:#EEEEEE !important;
}.inner_sidebar {
margin-left: 0px !important;
}.sidebar .widget {
padding-left:30px !important;
}Any advise? Thanks!
March 2, 2016 at 9:08 am #591959Hey!
You can try this instead:
#top #main .sidebar { padding-right: 20px; } #top #main .sidebar:before { content: ''; display: block; background: red; width: 100%; min-height: 2000px; position: absolute; top: 0; }
Best regards,
IsmaelMarch 2, 2016 at 11:00 am #592006Hey Ismael,
That’s a little better but still doesn’t fill the entire sidebar. See my link in the private content.
Thanks!
March 7, 2016 at 12:18 pm #594239Hey!
Alright. Please remove the css code then replace it with this:
#top #main .sidebar { background: red; padding-right: 50px; }
Add this code in the functions.php file:
add_action( 'wp_footer', 'ava_custom_script' ); function ava_custom_script() { ?> <script type="text/javascript"> (function($){ var a = function() { if($('$header').css('position') != 'fixed') return; var ch = $('.container .av-content-small.units').height(); $('#top #main .sidebar ').css('height', ch); } a(); })(jQuery); </script> <?php }
Best regards,
IsmaelMarch 12, 2016 at 8:32 pm #597256How do I access the functions.php file?
March 14, 2016 at 6:34 am #597549 -
AuthorPosts
- You must be logged in to reply to this topic.