• 0
Sign in to follow this  
Followers 0

I Messed Something Up! :(

Question

Posted · Report post

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 http://www.lookingfortigger.com (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;}

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

On the site withe the bigger images this is what I found using FireFox with FireBug: [code]element.style { max-height: 80px; max-width: 80px; }[/code] For the site with the smaller images: [code]element.style { max-height: 64px; max-width: 64px; }[/code] 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: [code][/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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: [code]li.jcarousel-item-horizontal img {width: 100px; height: 100px;}[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 ... [url="www.bethszimmerman.com"]www.bethszimmerman.com[/url] has each picture assigned 64px x 64px while [url="www.lookingfortigger.com"]www.lookingfortigger.com[/url] 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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 [i]li.jcarousel-item-horizontal img {width: 100px; height: 100px;}[/i] 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).

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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! :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Glad to have helped Beth :) -tony

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0