This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Some CSS advice

  • Creator
    Topic
  • #2341
    fcampagna
    Participant

    I’m looking to take the white background and some of the margin/padding off the image gallery thumbs section on this homepage. I’m not sure how to do it without impacting the white background on the element above it. Any help is greatly appreciated.

    http://digitalvideoconsulting.com/2012/

Viewing 12 replies - 1 through 12 (of 12 total)
  • Author
    Replies
  • #2368
    Jason Bobich
    Keymaster

    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

    Here are some selectors that you can fiddle with from your Child theme’s custom.css file in terms of padding and margin in this area.

    /* 1st Gallery */
    .home .featured-element-2 .element-content .element-inner { … }
    .home #wrapper .featured-element-2 .gallery { … }
    .home #wrapper .featured-element-2 .gallery .gallery-icon { … }
    
    /* 2nd Gallery */
    .home #wrapper .main-bottom .gallery { … }
    .home #wrapper .main-bottom .gallery .gallery-icon { … }

    Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

    #2369
    fcampagna
    Participant

    Thanks, Jason. I use Chrome to do exactly what you’re suggesting, and I’ve made many modifications to the theme, but I was having trouble drilling down to those selectors. I will check them out and hopefully get the result I’m looking for.

    Awesome theme, by the way!

    #2370
    Jason Bobich
    Keymaster

    See my edits to the post above after you responded. I re-read your question and it was sort of unclear which gallery on your homepage you were referring to, so I revised.

    #2395
    fcampagna
    Participant

    Jason,

    I’m having no luck at all using those selectors. Are you sure they’re correct for the element (in the blue section) that I’m referring to?

    That’s the crux of the problem. It’s very confusing trying to figure out exactly what the element is that I’m trying to tweak.

    Can you double-check it for me?

    Thanks,
    Fred

    #2397
    Jason Bobich
    Keymaster

    You’re talking about the first gallery on the page, right? In the featured area? I think they’re correct. This should get you pretty close.

    .home .featured-element-2 .element-inner,
    .home #wrapper .featured-element-2 .gallery {
    	padding: 0;
    	margin: 0;
    }
    .home #wrapper .featured-element-2 .gallery .gallery-icon {
    	padding-top: 0;
    	padding-bottom: 0;
    }

    I just tried it on your site and looks something like this:

    [edit] Looking back at my original post, this:

    .home .featured-element-2 .element-content .element-inner

    Should be this:

    .home .featured-element-2 .element-inner

    Are you familiar with Chrome’s developer tools to find these things fairly quickly? When you inspect something you can take your mouse and hover over each HTML element going up/down the tree of the HTML markup and see which elements have padding/margin. I don’t think this is as easy to do in Firebug for Firefox.

    #2400
    fcampagna
    Participant

    Jason,

    I am very familiar with Chrome’s developer tools. For whatever reason, I could not figure out that the proper tag to edit was
    .home .featured-element-2 .element-inner

    If you look at the site now, it looks exactly like I want it to. Thanks.

    One more thing…if you resize the browser to approximately what you get on an iPhone (horizontal) you will notice that the social media icons and telephone number display over the logo. Also, the menu looks a little funky. Is there any way to make it display better on that device when held horizontally?

    Thanks,
    Fred

    #2401
    Jason Bobich
    Keymaster

    Aw, I got you. I didn’t realize you wanted to get rid of the white background. I guess I missed that.

    I am very familiar with Chrome’s developer tools. For whatever reason, I could not figure out that the proper tag to edit was “.home .featured-element-2 .element-inner”

    This not written anywhere. There are really tons of theoretical ways you could write it. This is just one way I made up looking at the effecting CSS combined with what other classes I see in the in the markup on the page.

    One thing to note is that WordPress adds many classes to the tag of your site that you can use to target individually pages. Since this is the homepage, I can see the “home” class on the body. So by prefixing everything with “.home” I know we’re targeting just items on the homepage.

    So in a theoretical example if you saw something like this in the theme’s CSS:

    .whatever { ... }

    And you wanted to change the “whatever” just on the homepage, you could come up with your own overriding CSS like this:

    .home .whatever { ... }

    And then you might also find this helpful, as well, for classes present with elements of the layout builder: http://dev.themeblvd.com/tutorial/styling-builder-elements/

    One more thing…if you resize the browser to approximately what you get on an iPhone (horizontal) you will notice that the social media icons and telephone number display over the logo. Also, the menu looks a little funky. Is there any way to make it display better on that device when held horizontally?

    You could apply the theme’s mobile styles on some of the header elements earlier if you wanted? That’d probably look nice with your logo that’s a little more large than most.

    @media (max-width: 700px) {
    	#branding .header_logo {float:none;margin-bottom:10px;text-align:center;}
    	#branding .header-addon {margin:0;position:static;}
    	#branding .header-addon-with-text {margin:0;}
    	#branding .header-text {text-align:center;}
    	#branding .social-media {margin:0;position:static;text-align:center;}
    	#branding .themeblvd-contact-bar ul {float:none;}
    	#branding .themeblvd-contact-bar li {display:inline-block;float:none;}
    }

    This is just copied from /assets/css/responsive.css, but applied at a larger viewport size. You can fudge around the 700px viewport size.

    #2402
    fcampagna
    Participant

    When I make the changes for the responsiveness of the site, should I directly edit the responsive.css file?

    #2404
    Jason Bobich
    Keymaster

    Nope. This would go along with any other custom CSS you’re inputting. And all of your CSS edits should be going in the custom.css file of your Child theme. I’m not sure if you’re just using the “Custom CSS” option temporarily, but consider moving that to the actual CSS file as you move along.

    #2405
    fcampagna
    Participant

    Jason,

    I have tested the site in iOS on an iPad, but my client is complaining of issues when viewing on his iPhone. He sent me this screenshot.

    http://i47.tinypic.com/2nlzeh4.png

    The problem arises with the lightbox effect on the videos.

    • This reply was modified 7 years, 8 months ago by fcampagna.
    #2408
    fcampagna
    Participant

    It looks to me like it’s a problem with the retina display when viewed horizontally. I tried it in the iOS simulator on my Mac and had similar issues. Any thoughts?

    #2409
    Jason Bobich
    Keymaster

    Hey can you start a new support topic about this? And I will explain and give a fix.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The forum ‘Swagger Responsive WordPress Theme’ is closed to new topics and replies.