I have a responsive Drupal Zen subtheme that I hacked together about a year & a half ago from some CSS & HTML that a non-Drupal designer handed off to me for my website. I've known that in certain layouts, it is buggy, and needs to be fixed, but I just haven't gotten around to it. After repeatedly reaching out to a local Drupal developer (and offering to pay him), I've gotten tired of waiting, and just need to fix this thing.
My bounce rate for folks on mobile devices is awful.
The URL is http://developcents.com. The homepage looks decent on any device. Internal pages need a lot of help, though, when viewed in certain screen sizes (including mobile devices). Let's use http://developcents.com/blog as an example.
In the below scenario, my question is not how to find the CSS files themselves. Rather, my question is, how can I find the necessary CSS settings using Firebug Lite, so that I can debug the CSS through my browser, instead of having to manually update each CSS file every time I want to test a change?
I can't find the actual CSS-styled divs, blocks, etc... causing the layout to break under certain dimensions. I know how to find, and edit, the CSS within the CSS panel, but I can't track down the specific CSS in this instance.
Additionally, as a secondary question, if you want to provide pointers on what I actually need to change, then please be my guest! But if you point me in the right direction on how I can go figure it out myself, that's fine too. :)
Let's get on to the scenario (which you can easily see by testing it yourself):
When I resize my browser window down to a certain size, the links & tweets section in the left sidebar move over to the right, so that the left side of the navbar aligns with the right side of the header area, while the content spans the full width of the page, except for the left margin, which stays in place but gets wider. Basically everything below the header gets screwed up, and it's easier to see the problems than explain them (so go test it).
Using Firebug Lite in Chrome, I can't seem to find the left margin for the "main" content area (see this screenshot clearly indicating the yellow margin), nor can I find the CSS for the navbar / tweets block (which I presume is some sort of float).
To modify the CSS within Firebug or Firebug Lite just select an element inside the HTML panel or inspect it via its inspector. Inside the Style side panel you'll see all CSS rules applying to the element.
Clicking the name or the value of a CSS property opens an inline editor to allow editing it.
On the right side of each rule you'll see the name of the style sheet, which contains the rule. Hovering it displays you the full URL and clicking it allows you to inspect it within the CSS panel.
You can also edit the styles directly within the CSS panel, which lists all style sheets available on the page.
Note: The changes you do there are not permament, i.e. on the next page reload they are gone! To make permanent changes you need to edit the files on the server.
Also note that I'm referring to the panels within Firebug. The panels within Firebug Lite basically work the same, though may look and work a little bit different. Furthermore Firebug Lite is not maintained anymore, so there's no guarantee that everything is working as expected.
Related
I'm setting up an affiliate e-commerce website with WordPress and yesterday an unwanted white semi transparent overlay appeared on it and I have no idea how to remove it. I searched on Google but didn't find a proper answer. It appears on loading and basically disappears after 30 seconds or so.
Please note that I'm pretty new to all of this.
Website is www.mystupidgift.com
Usually when these issues come up, it's best to try and click the "X" to stop the page from loading while the "thing does the thing you want to fix". So while the page has the "overlay", stop the page loading, and then you can open up Dev Tools (F12 in Chrome) and proceed to scroll down through the elements.
For something like this, it's a bit more difficult, because you're generally looking for a full screen element, but not always. You can just hit "delete" on them one by one until the undesired thing goes away, (I find this easier to work from the bottom up, since those elements have a higher z-index by default and show up on top of earlier elements).
So I started to do that when I realized that it's not actually an overlay, but actually your content is being set to a lower transparency (which provides a similar effect, letting the white background of the body bleed through)
Your theme's page-in-out.min.css file sets your site's container (#st-container) to an opacity of .2. This is the effect you want to remedy. It goes away when your website is fully loaded and the .fade-in class is added to the #st-container which sets the opacity to 1. I'm not sure which JavaScript file does that, because I didn't look and don't think it's necessary to know.
I'm not familiar with the theme you've chosen, but there very well may be a setting in there like "fade website out until it's loaded", "page in/out", or something to that effect. If you don't want to mess with that, there is no setting, or you can't find it - you can just add some more specific CSS to that element to make it always fully opaque, regardless of the .fade-in class.
To do that, you can just go to Appearance > Customize and open up the Additional CSS tab. In there, you can just paste something like:
#st-container.st-container { opacity: 1; }
Here's a quick screengrab of the dev tools process that led me to that. While this isn't a specific answer in general, it's more of a process answer, and hopefully you can make use of that process (stop loading, open dev tools, manually dig through elements and look at the CSS and computed styles, delete elements if needed with the Delete key, etc.) next time something like this comes up!
I created a content script Chrome extension toolbar by following #RobW's answer to this question.
I'm now trying to get certain elements to overlay on the rest of the page, but currently they are only showing within the iframe.
For instance, an icon is clicked and shows a notification panel/tooltip. As you can see, it is cut off by the edge of the iframe:
Is there a way to change the CSS of the panel to hover on top of the rest of the page despite being in a separate iframe?
BTW, I made the height of the toolbar 143px, instead of the 43px you might expect of a toolbar, just so the issue would be more apparent.
No, I'm fairly sure you can't do that with an iframe-based approach. That beats the purpose of iframe content isolation - imagine the clickjacking possibilites!
You will need to inject your UI into the document itself.
You probably went with an iframe-based approach because of possible clashes with the page's own CSS, for example. Thankfully, there's a modern tool to help with this - Shadow DOM.
I am building a site using Drupal 7 and have run into a CSS issue. I am trying to wrap everything on this registration page in the center and at the same time reduce the width of the drop down buttons. I believe I've narrowed the problem to my logintobaggan (drupal module) css sheet. But the button "widths" seem to be from the foundation.min.css (according to chrome elements). How would you guys approach this CSS problem? I am relatively new, so please don't be too harsh ;). Thanks!
http://medicaldoctorapps.com/user/register
I would get Firebug or similar in-browser development tool, select the element you are interested in seeing the CSS properties for, and then see exactly which rules are being applied or overridden. You can even modify the CSS right there in the tool until you get want you want.
From such a tool, I can see that the button widths are not explicitly defined, but are basically derived from the amount of padding (5px) around the text string inside the button.
The rules are defined starting on line 41 of this file:
http://medicaldoctorapps.com/sites/all/modules/logintoboggan/logintoboggan.css?mgqhxk
I have been working on a little photo slider. It looks slightly different in Chrome than in FF so I thought a CSS reset would make them both look the same. I used the Yahoo! YUI CSS reset model but nothing changed. It looks good in FF but in Chrome the "Resume" button on the right side sticks up too high and a thin gray line at the bottom of the big pictures gets cut off where the main buttons are located. Here is the URL:
http://www.replayground.com/slider/02.html
You can ignore the stuff below the circles. Just testing stuff down there.
Here is what I added to my 02.html file:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
I'd really like advice on how to get CSS Reset working correctly. Not how to fix the specific buttons problem you see. As I add elements to the page I don't want to have to go through this each time.
A CSS reset is not designed to make all the rest of CSS cross-browser. It is designed to set all of the client default rules on all the different browsers to the same thing so that you are always working from a predictable set of CSS rules. How the browsers interpret those rules is still specific to each one.
In your case, you still need to figure out how to write CSS rules that operate the same in both Chrome and FF - the reset simply levels your starting point a little, it doesn't remove the browser rendering differences.
You may find a cross browser CSS framework (e.g. blueprintcss.org or 960.gs) to be more helpful for your current situation. They often use a reset, but also have rules that compensate for the differences in the rendering of the after-reset CSS rules.
jball is very right about the resets. They just allow you to start with a blank page, but you should still write a proper document structure and good CSS to get good and consistent results.
In your case, all elements in your page are loose in the page. This will give you trouble in the end. Some things will shift a few pixels, especially when you don't specify exact height for every item. Fonts are rendered in different heights by each browser. These may be tenths of pixes, but when they get rounded, your website is a little off between browsers.
When you use a little deeper nesting of elements, you can make better use of positioning elements (relative and absolute). If you put in a specific div for the header, and give it a fixed size, you can position each element in there very precisely, which is especially handy for headers and menu's.
I took the liberty of creating a small example, which shows just some basics of positioning. It is not perfect and uses brightly colored borders instead of images for the layout. But it's just for showing the element nesting and absolute and relative positioning, along with a negative margin trick.
http://jsfiddle.net/YwCxQ/3/
I've ported the Wordpress app from wordpress.org to my web site. I've changed the html and the css to conform to my existing design. I've placed the entry data in my 'main' div, which has a left margin of 19em to keep it to the right of my navigation div. This margin appears to be overridden somehow by the generated html within the 'main' div. I've patched some of the elements by adding the margin back to them, but would prefer a cleaner fix. I've looked at the page using Firebug, but I can't identify the appropriate entry. What is overriding my margin setting?
The problem page is here. Notice the Tags at the bottom.
Another page that doesn't use WordPress code doesn't have this problem. It is here.
Thanks for any help
I want to keep my acceptance rate high so I don't appear ungrateful for all the great help on this site. The answer was that the css was defined as a class and the html was using 'id='. Sometimes it helps to make sure the computer is plugged in.