Tagged: , , , , , , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 20, 2016 at 4:16 pm #568712
    Minxywitch

    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 #569160
    Rikard

    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 8 years, 3 months ago by Rikard.
    January 24, 2016 at 9:10 pm #570894
    Minxywitch

    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

    January 25, 2016 at 8:57 am #571151
    Rikard

    Hi,

    Try the following as well: 

    .inner_sidebar {
    margin-left: 0px !important;
}

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

    Regards,
    Rikard

    January 28, 2016 at 10:33 pm #574146
    Minxywitch

    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

    February 1, 2016 at 7:52 pm #575989
    Vinay

    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

    February 27, 2016 at 9:32 pm #590297
    athenamiller

    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!

    March 2, 2016 at 9:08 am #591959
    Ismael

    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

    March 2, 2016 at 11:00 am #592006
    athenamiller

    Hey 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 #594239
    Ismael

    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

    March 12, 2016 at 8:32 pm #597256
    athenamiller

    How do I access the functions.php file?

    March 14, 2016 at 6:34 am #597549
    Rikard

    Hi,

    You can find that under Appearance–>Editor.

    Thanks,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.