Some CSS advice
-
CreatorTopic
-
January 10, 2013 at 3:51 pm #2341
fcampagna
ParticipantI’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.
-
CreatorTopic
-
AuthorReplies
-
January 10, 2013 at 8:02 pm #2368
Jason Bobich
KeymasterFor 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.
January 10, 2013 at 8:04 pm #2369fcampagna
ParticipantThanks, 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!
January 10, 2013 at 8:06 pm #2370Jason Bobich
KeymasterSee 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.
January 11, 2013 at 12:25 am #2395fcampagna
ParticipantJason,
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,
FredJanuary 11, 2013 at 1:10 am #2397Jason Bobich
KeymasterYou’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.
January 11, 2013 at 1:24 am #2400fcampagna
ParticipantJason,
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,
FredJanuary 11, 2013 at 1:47 am #2401Jason Bobich
KeymasterAw, 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.
January 11, 2013 at 1:50 am #2402fcampagna
ParticipantWhen I make the changes for the responsiveness of the site, should I directly edit the responsive.css file?
January 11, 2013 at 1:59 am #2404Jason Bobich
KeymasterNope. 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.January 11, 2013 at 3:26 am #2405fcampagna
ParticipantJason,
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 9 years, 4 months ago by
fcampagna.
January 11, 2013 at 3:35 am #2408fcampagna
ParticipantIt 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?
January 11, 2013 at 5:10 am #2409Jason Bobich
KeymasterHey can you start a new support topic about this? And I will explain and give a fix.
-
This reply was modified 9 years, 4 months ago by
-
AuthorReplies
- The forum ‘Swagger Responsive WordPress Theme’ is closed to new topics and replies.