I Messed Something Up! :(
Started by
bethzimmerman
, Mar 16 2012 12:29 AM
7 replies to this topic
#1
Posted 16 March 2012 - 12:29 AM
Using Pagelines Framework
I was trying to figure out how to change the font or border on ONLY the Universal SB (below the carousel) using Firebug. I tried editing *border* which went from *none* to the word border not even being there. Plus the images in my carousel shrunk which I do NOT like! They were the same size as the ones at (my other blog). Both blogs have the same custom css but they look different. Help? And is there an undo button in Firebug? I looked about wildly and couldn't find one.
Thanks in advance!
body{}
li.jcarousel-item-horizontal img {width: 100px; height: 100px;}
div.jcarousel-container-horizontal {background-color: #fff;}
#branding .content-pad {
padding: 10px 20px 14px;
}
#carousel .thecarousel {
padding-top: 0px;
padding-bottom: 0px;
}
.post-excerpt {text-align: justify;}
#2
Posted 16 March 2012 - 02:02 AM
On the site withe the bigger images this is what I found using FireFox with FireBug:
For the site with the smaller images:
Even though both have images 150x150 the max size is 80 or 64 based on the CSS. You will need to adjust this to make it work.
Here's an example of the HTML code as well:
For the site with the smaller images:
Even though both have images 150x150 the max size is 80 or 64 based on the CSS. You will need to adjust this to make it work.
Here's an example of the HTML code as well:
#3
Posted 16 March 2012 - 03:13 AM
I'm not sure I understand how to find and fix that. Sorry.
#4
Posted 16 March 2012 - 03:36 AM
FireBug doesn't have an undo, but you can refresh your site and the changes you've made in FireBug will be removed. In the custom CSS you have right now, adjustments can be made and saved, and in FireBug, the changes aren't permanent.
If you're trying to adjust the size of your carousel thumbnails, you should adjust the values here:
If you're trying to adjust the size of your carousel thumbnails, you should adjust the values here:
#5
Posted 16 March 2012 - 01:06 PM
I already exited and went back in and things still aren't right. I'm at work right now (no access to Firefox) so I can't look at Firebug. The line of code that you gave me is one that I already have in my Custom CSS. For some reason if you look at the sites on Firebug ... www.bethszimmerman.com has each picture assigned 64px x 64px while www.lookingfortigger.com is 80px x 80px . I have no idea how or why those settings got set that way or how to change them. I actually went through last night and change each 64 to an 80 (individually) but then I refreshed ... which as you just explained deleted my changes. How do I make sure that the change sticks? And how do I change the default to 80 x 80 or larger rather than having to change each individual icon?
Thank you for your patience! Beth
Thank you for your patience! Beth
#6
Posted 16 March 2012 - 01:37 PM
Beth, one possibility is that some other CSS is interfering with the code you've got in your custom CSS.
If you've got the li.jcarousel-item-horizontal img {width: 100px; height: 100px;} code in your custom CSS already, then something else is over-riding it with max-width: 64px; and max-height: 64px;
Maybe you could put this in your custom CSS, just as an experiment:
li.jcarousel-item-horizontal img {max-width: 100px !important; max-height: 100px !important;}
The '!important' can force it to overwrite any other CSS rules (unless they also say '!important;') so it's worth a try, just to see if it helps.
In terms of making your changes "stick" in Firebug, it doesn't really work that way - you test your changes in Firebug and then go into PageLines's "custom code" area, and put the new CSS in there or in another CSS file., maybe by copying and pasting, or in my case by jotting notes in a text editor and pasting them in somewhere else.
It's possible that the 64x64 setting is coming from the actual plugin/widget options themselves. The HTML code has the style coded right in to the element, as opposed to being stored in a CSS file (external or inline) (for example, it says
instead of ). That makes me wonder if the carousel plugin adds these details, which then makes me think you should hunt around your WordPress installation to see if there are any size instructions for the plugin/widget you're using. These plugins/widgets often have selections for "thumbnail size".
Have a look by clicking "settings" on the left hand side, and see if there's a settings page for the specific plugin. if not, click on "appearance" and then "widgets", to see if it has settings there - you'd find them by looking on the right hand side for the actual sidebar the carousel was dragged into (maybe "universal sidebar", judging from your HTML).
If you've got the li.jcarousel-item-horizontal img {width: 100px; height: 100px;} code in your custom CSS already, then something else is over-riding it with max-width: 64px; and max-height: 64px;
Maybe you could put this in your custom CSS, just as an experiment:
li.jcarousel-item-horizontal img {max-width: 100px !important; max-height: 100px !important;}
The '!important' can force it to overwrite any other CSS rules (unless they also say '!important;') so it's worth a try, just to see if it helps.
In terms of making your changes "stick" in Firebug, it doesn't really work that way - you test your changes in Firebug and then go into PageLines's "custom code" area, and put the new CSS in there or in another CSS file., maybe by copying and pasting, or in my case by jotting notes in a text editor and pasting them in somewhere else.
It's possible that the 64x64 setting is coming from the actual plugin/widget options themselves. The HTML code has the style coded right in to the element, as opposed to being stored in a CSS file (external or inline) (for example, it says
Have a look by clicking "settings" on the left hand side, and see if there's a settings page for the specific plugin. if not, click on "appearance" and then "widgets", to see if it has settings there - you'd find them by looking on the right hand side for the actual sidebar the carousel was dragged into (maybe "universal sidebar", judging from your HTML).
#7
Posted 16 March 2012 - 01:45 PM
That worked! Thank you so much! It is unbelievably frustrating when I KNOW there is a simple answer but I can't find it! I appreciate your taking time to write out such a thorough answer! You've made my day!
#8
Posted 16 March 2012 - 01:52 PM
Glad to have helped Beth
-tony










