Archived

This topic is now archived and is closed to further replies.

  • 0

Editing Pagelines CSS Using Plugin

Question

Posted · Report post

Hi, I've been using firebug to figure out the inner workings of the iblogpro5 theme from page lines, and using the customize css plugin to change elements of the theme. I have a few questions: 1) When i add a style to the plugin with a file location (an image located in the iblogpro 5 themes image folder), i can't it to work. ie: original: background: url("images/nav-bg.png") repeat-x scroll left bottom rgb(90, 92, 94); new (added to the pagelines customize plugin): background: url("images/new-bg.png") repeat-x scroll left bottom rgb(90, 92, 94); I've added the file "new-bg.png" to the right folder, but when i reload the page the new image file for the menu does not appear. Do i need to point to the image location in a different way? 2)How do i nullify a css style? ie: original: #page .navigation_wrap .searchform .searchfield { background: url("images/bg-search.png") repeat-x scroll 0 0 transparent; } when i hide the above css in firebug, i can see a magnify glass appear in the search bar. I want that to show up instead of the above css file. I have tried the following which has not worked to produce the desired effect: #page .navigation_wrap .searchform .searchfield { background-image: none; } 3)How can I remove the text "search" from the search bar? I just want the magnify glass to show up instead? 4) How do i change the colour of the magnify glass in the search bar?

Share this post


Link to post
Share on other sites

1 answer to this question

Posted · Report post

Hi, 1. This is because when you use a URL like this (images/bg-search.png), it is called a relative path. Which means its relative to the CSS file. So basically, if you were going to do this with the PageLines customisation plug-in, you will need to have your images relative to the style.css file located in the PageLines customisation plug-in folder. For more information on relative URLs in CSS, read this here - http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to 2. The CSS has background and not background image like you have added. Therefore, give this a try instead.

#page .navigation_wrap .searchform .searchfield {
	background: none;
	}
If that doesn't work, add !important to your CSS, so it looks like this:
#page .navigation_wrap .searchform .searchfield {
	background: none !important;
	}

3. This would require customising the code. If you require assistance with this, I recommend you contact a PageLines Pro. - http://www.pagelines.com/pros/ 4. The Magnifying glass is an image, therefore you will need to edit the image in software such as GIMP or Adobe Photoshop/Illustrator.

Share this post


Link to post
Share on other sites