Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #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

    #569160

    Hi 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 4 years, 4 months ago by  Rikard.
    #570894

    Thanks 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

    #571151

    Hi,

    Try the following as well:

    .inner_sidebar {
        margin-left: 0px !important;
    }
    
    .sidebar .widget {
       padding-left:30px !important;
    }
    

    Regards,
    Rikard

    #574146

    Hi 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

    #575989

    Hi!

    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,
    Vinay

    #590297

    Hey 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!

    #591959

    Hey!

    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,
    Ismael

    #592006

    Hey Ismael,

    That’s a little better but still doesn’t fill the entire sidebar. See my link in the private content.

    Thanks!

    #594239

    Hey!

    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,
    Ismael

    #597256

    How do I access the functions.php file?

    #597549

    Hi,

    You can find that under Appearance–>Editor.

    Thanks,
    Rikard

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.