Jump to content


Photo
- - - - -

I Messed Something Up! :(


  • Please log in to reply
7 replies to this topic

#1 bethzimmerman

bethzimmerman

    Advanced Member

  • Members
  • 37 posts

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

Please Login or Register to see this Hidden Content

(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 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 16 March 2012 - 02:02 AM

On the site withe the bigger images this is what I found using FireFox with FireBug:

Please Login or Register to see this Hidden Content


For the site with the smaller images:

Please Login or Register to see this Hidden Content


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:

Please Login or Register to see this Hidden Content



#3 bethzimmerman

bethzimmerman

    Advanced Member

  • Members
  • 37 posts

Posted 16 March 2012 - 03:13 AM

I'm not sure I understand how to find and fix that. Sorry.

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

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:

Please Login or Register to see this Hidden Content



#5 bethzimmerman

bethzimmerman

    Advanced Member

  • Members
  • 37 posts

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

#6 toasthosting

toasthosting

    Member

  • Members
  • 24 posts

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).

#7 bethzimmerman

bethzimmerman

    Advanced Member

  • Members
  • 37 posts

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 toasthosting

toasthosting

    Member

  • Members
  • 24 posts

Posted 16 March 2012 - 01:52 PM

Glad to have helped Beth :) -tony