[Resolved] Creating a second CSS styled sidebar widget in Marketer

Home Forums Support Creating a second CSS styled sidebar widget in Marketer

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1487330
    Chris

    Hi, I want to style a second CSS widget like the first one in the sidebar of Marketer theme, but with different colors.

    I’ve tried:

    /* Featured widget 2 */
    .sidebar .widget:second-child {
    	background-color: #343E47;
    	color: #fff;
    }
    
    .sidebar .widget:second-child .widget-title,
    .sidebar .widget:second-child a:not(.button) {
    	color: #fff;
    }
    
    .sidebar .widget li {
    	margin-bottom: 15px;
    }
    
    .button.light {
    	background: #1b78e2;
    	color: #fff;
    }
    
    .button.light:hover {
    	background: #1b78e2;
    	color: #fff;
    }
    

    But that doesn’t seem to work. Please explain how to make a second or multiple CSS styled widgets.

    Thanks! πŸ™‚

    #1487371
    Leo
    Staff
    Customer Support
    #1487394
    Chris

    Thanks Leo, no that doesn’t help me. I have the CSS styling seet up, but it’s not reflecting in the second, third, etc. widget where I want it applicated.

    I’m not a CSS pro πŸ˜‰

    This is the default CSS for the widget styling in Marketer (I just changed the colors)

    /* Featured widget */
    .sidebar .widget:first-child {
    	background-color: #343E47;
    	color: #fff;
    }
    
    .sidebar .widget:first-child .widget-title,
    .sidebar .widget:first-child a:not(.button) {
    	color: #fff;
    }
    
    .sidebar .widget li {
    	margin-bottom: 15px;
    }
    
    .button.light {
    	background: #1b78e2;
    	color: #fff;
    }
    
    .button.light:hover {
    	background: #1b78e2;
    	color: #fff;
    }

    Now if I try the same code with ‘second-child’ or ‘third-child’ it doesn’t work on the second or third widget. Hope I’m explaining clearly.

    #1487397
    Leo
    Staff
    Customer Support

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know πŸ™‚

    #1487491
    Chris

    Yeah sure, see the link below.

    #1487679
    Leo
    Staff
    Customer Support

    You would do this for the second widget:

    .sidebar .widget:nth-child(2) {
    	background-color: #343E47;
    	color: #fff;
    }
    
    .sidebar .widget:nth-child(2) .widget-title,
    .sidebar .widget:nth-child(2) a:not(.button) {
    	color: #fff;
    }
    #1488500
    Chris

    Perfect Leo, exactly what I needed. Thanks!

    #1488839
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.