Jump to content


Photo
- - - - -

SUGGESTION: PL specific CSS Cheat-Sheet


  • Please log in to reply
6 replies to this topic

#1 sheilahoff

sheilahoff

    Advocate

  • Members

  • 444 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 19 June 2013 - 12:12 AM

I'm new to PL and more of a designer than a coder. I'm not new to WP and I can use Firebug to some degree. I always research on W3Schools before poasting for help. I've been really struggling with a few CSS things. I've posted under customizations for help and it would appear the standard PL response is that tech support is not here to help us with site design/coding.

 

OK, I do get that, although I must say a drag-n-drop framework might be patient with non coders. But at any rate my post is not asking for answers to how to do this code, rather  inquiring if there exists a PageLine specific CSS cheat sheet. If so, I haven't been able to locate one.  If not, I'd like to suggest that those who know their way around consider pitching in to put together one for the community. I want to empahsize I am NOT talking about basic or generic CSS. There are zillions of resources. But things that are very uniquely PL.

 

So for instance, the issues I'm currently dealing with that it would seem would be commone questions are below but these are just a few off the top of my head. It would be easy to setup a wiki for the community to refer to if PL isn't interested.

 

I want to change the colors of the NavBar. There are only a few default colors to choose from. When I use Firebug I can't find the right code. Eventually I found some code but still, it's complex and I'm not sure what to change to colorize it. A simple example that all could refer to would be SO welcome.

 

Another example is that on the fixed site you can easily add a nice drop shadow to it. At one point I thought I was going to use the full width and needed code for adding a drop shadow for the site. Staff provided initial code but it put shadows all over where I didn't want them instead of just the outside. When I asked for further clarification, I was on my own. So a simple tutorial that shows the drop shadow code and which elements change what.

 

And finally, even with the fixed format allowing the lovely drop shadow, if I want my footer content to have a background as shown on my dev site here: http://www.solsara.hoffmangraphics.com, and you're even able to figure out code for that...then I need to figure out code for HOW to add a drop shadow to the footer to match the content area?

 

Thanks for listening. I hope we can make something like this happen. It would be a useful asset to the greater community and might save the support staff some time/effort too.



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 June 2013 - 01:07 AM

Hi Sheila

 

This has been suggested before and it's a great idea, I will pass your comments on to the core team to review. Currently there isn't a css related cheat sheet for Pagelines.

 

Once you get the hang of it firebug will give up the Pagelines css for each section really quickly, the css is pretty similar for each section, its just find the right class or id to apply the edits to.

 

Most of the css or classes/id's for common areas can be found on the forum to if you get stuck. For the css for navbar check out this thread which includes the full code for the various different browsers - http://www.pagelines...kground-colour/

 

Going forwards Pagelines is looking to invest a lot more time in creating tutorials on common questions and various customizations. This has been under discussion recently and the first drafts of this process are underway :-)


  • sheilahoff likes this

#3 seeyou30

seeyou30

    Advanced Member

  • Members
  • 61 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 19 June 2013 - 01:32 AM

Good point, Sheila!



#4 sheilahoff

sheilahoff

    Advocate

  • Members

  • 444 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 19 June 2013 - 04:55 AM

Thanks guys. I'm excited that you're working on this. I'd be happy to provide input on questions as well as clarity of examples.

 

I had gotten decent at using Firebug for my last tool. But something about PL seems to leave me with a lot of unrecognizable stuff. Several times I've tried to find the right code and been unable to. But I'll work on it.



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 June 2013 - 12:37 PM

Sheila,  I've moved this topic, since it's a suggestion, to the Ideas and Feedback forum. 

 

Firebug has a submenu that varies depending on what you're looking at.  There's a tiny little arrow pointer, either side of it, which you can follow to find the hierarchy from your starting point.  So, when you click something,  you can inspect up or down to see if there's other CSS or HTML impacting the thing you're looking at. 

 

Also, in the Style tab, over the CSS,  there's options you can check for Active, Hover, and Focus, which are important to use when there's a link involved, such as menu items.

 

Just a few little Firebug tidbits that may make your use of that program easier.



#6 sheilahoff

sheilahoff

    Advocate

  • Members

  • 444 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 20 June 2013 - 03:19 PM

Thanks. I hadn't noticed this ideas section. I appreciate you moving it. Also appreciate the Firebug pointers. I knew about the links options there but hadn't used that submenu any other times.



#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 21 June 2013 - 05:06 AM

Great.