Jump to content


Photo
- - - - -

Editing Pagelines CSS Using Plugin


This topic has been archived. This means that you cannot reply to this topic.
1 reply to this topic

#1 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts

Posted 01 August 2012 - 02:16 AM

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?

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15084 posts

Posted 01 August 2012 - 08:28 AM

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 -

Please Login or Register to see this Hidden Content



2. The CSS has background and not background image like you have added. Therefore, give this a try instead.

Please Login or Register to see this Hidden Content


If that doesn't work, add !important to your CSS, so it looks like this:

Please Login or Register to see this Hidden Content


3. This would require customising the code. If you require assistance with this, I recommend you contact a PageLines Pro. -

Please Login or Register to see this Hidden Content



4. The Magnifying glass is an image, therefore you will need to edit the image in software such as GIMP or Adobe Photoshop/Illustrator.