14 replies to this topic

[osgzach]

Do you edit the main  CSS file for your site  (keeping a pre-modification backup), or do you use the  Customize plugin with the blank  Style.css?

 

The problem I am having is,  I am slowly getting used to Firebug, and it helps and is great for showing real-time changes, etc..   But when the way CSS updater works,  it apparently  can't work off the  Pagelines-Customize plugin's  blank Style.css  because  it is looking for the original CSS to modify (which doesn't exist in that file),  and thus won't insert the new CSS into the file.  (I found this out because one update I did get to sync, because I had previously added my own modification of the CSS to the blank stylesheet -  so I just got lucky that it was the exact CSS path I needed)

 

Kind of a pain,  but I didn't want to start down a dangerous road by hunting for the actual CSS file the site references and modifying it,  and finding out  something breaks down the road after an update etc..   But I suppose something "changing" could also be a problem even when using your own CSS?     I dunno..  I'm gonna start rambling if I explore that train of thought...

 

 

 

I've thought about just finding that file, and copying all the CSS in it,  and pasting it into the  blank Style.css,  so I can modify it that way.   But even in this age of broadband  that strikes me as -  less than elegant,  and like a lot of unneeded duplicate data to load.

 

 

I'd like to hear other peoples thoughts on how they approach this kind of issue, when it comes to customization, and the tools they use.

[Danny]

Hi,

 

Not quite sure what you mean to be honest. However, if you are getting to grips with Firebug, then all you need to do is inspect the element you wish to change and copy the code that is used for that element.

 

For example, lets imagine you wish to increase the padding the of your content area, by default the CSS used is this:

 

Please Login or Register to see this Hidden Content

Now, all sections come with a unique class for that section, we recommend you use these classes when adding custom CSS for sections, using ID's is not ideal, as they can overpower other CSS.

 

So we have the content sections padding code above, now we wish increase the padding left and right to 40px. When you inspect the section, you will notice that next to the ID #Content, you will see class="" with a number of classes associated to that section.

 

Usually, these class name look something like this

 

.section-sectionname

 

In the case of the Content section, the class is called

 

.section-content-area so we will use this instead of #Content

 

So our CSS will now look like this:

 

Please Login or Register to see this Hidden Content

 

 

Now adding the above code to the CSS/LESS editor in PageLines > Site Options > Custom Code, will work without any issue. However, if you use the Child theme or the Customise plugin, you may need to add the following to override the the default CSS.

 

#site

#page

 

Both of these are overrides and allow your custom CSS to when using the the Child theme or the Customise plugin. So our custom CSS above for our content section with the #site or #page would look like this:

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

Hope this helps

[osgzach]

Yeah I think that is part of the issue I have been having..   A lot of times when I've tried copying out the modified CSS  I end up playing a guessing game,  which is kind of frustrating when looking at a huge CSS file like the one involved..  Part of the problem for me has been  sometimes I could not get changes to stick unless I overrode the CSS at the  #ID  level.    Unless I am misremembering,  I admit I'm still wrapping my head around things,  as I've never worked with a CSS file this large or complex.

 

As for what I was getting at -  basically,  CSS Updater is a  plugin type of add-on for  Firebug,  and lets you sync the changes you've made to a CSS file.   But it needs the "original" CSS to be in the file it is syncing,  I guess  because it modified the existing CSS instead of inserting new stuff.        Basically  I've been looking for an easier way to  make changes I am satisfied with in Firebug, and then get them saved and working as painlessly as possible  (i.e not playing a guessing game with copy-paste and the CSS paths).   Hence why I brought up just copying all the original CSS into the blank   style.css  that Customize uses (this is the file CSSupdater is set to sync to, i.e the same as if I were overriding manually )...    make sense?

[James B]

Hi there, the only problem you'll have there is if any future updates have css changes in them and your site is working off of an older version of the css which you've copied into the customize plugin, then the site might conflict somewhere.

 

I don't use cssupdater so i can't offer a suggestion there unfortunately, if i'm doing lots of css changes i keep a blank text doc on the side of screen and copy all into their quickly before going back and pasting the entire thing into pagelines.

[osgzach]

Yes,  that is pretty much the problem I am struggling to decide how to deal with..   I don't want to have the site break after an update,  but by that same token,  if I am using a custom CSS  via Customize to override  the default CSS,  would that not also break the site after an update?    It seems like it would,  although I suppose in that case the up-side is that the damage is only limited to the specific CSS you were overriding in the first place.

 

Frankly this could be a non-issue if  CSS Updater had more options to configure how you wanted it to work..   I don't know why it doesn't,  but it would be great to be able to tell it  "this is the CSS file I want you to put updates in,  paste the entire new CSS chain into this file (or update it if it already exists)  instead of looking for existing code to modify"..   Seems like a no brainer, huh ?

 

I guess for now, I'll have to get "better" at  the copy-paste mechanism.

[catrina]

if I am using a custom CSS  via Customize to override  the default CSS,  would that not also break the site after an update?

No, it wouldn't, because PL Customize is a plugin. It's not a part of the core.

[osgzach]

Would you care to elaborate on that ?

[Danny]

PageLines provides three methods to add custom CSS/LESS to your website, which are;

 

In Framework

PageLines Child theme

PageLines Customise plugin

 

The Framework

 

The PageLines Framework allows you to add custom CSS using the CSS / LESS editor. Both CSS and LESS can be used within the Custom CSS box, located under Custom Code within PageLines. Variables can also be assigned here as well. This is the easiest way to get started with LESS.

If you wish to add basic CSS/LESS to your website and nothing more, then The Framework method is for you.

 

Note: You’re unable to customize the Framework further with hooks or custom page templates, as this would require editing the core files (something we do not recommend or support), any edits made to these files will be removed upon updating PageLines Framework, when an update is available.

 

Child Theme

 

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme. The PageLines Base Child theme, allows you to add custom CSS/LESS, custom page templates and hooks.

 

Think of the child theme as the chassis of a car, while the Framework is the engine that makes it go. No matter how you style the interior, the Framework remains there to power the site and provide the tools to move forward.

 

The benefit of working with a child theme is that the child theme files are separate to the parent theme (in this case PageLines Framework). This means, when an update becomes available to the partent theme, your custom CSS/LESS, custom page template(s) or hooks, will not be overwritten upon update.

 

The disadvantage of using a Child theme, is that you can’t then install a 3rd party child theme through the store and update it, as you will lose your edits.

 

Customize Plugin

 

The Customization plugin contains both a style.css and a functions.php file like the child theme, it also supports style.less. However, the plugin doesn’t support the creation of custom page templates or child sections.

The advantage of the Customize Plugin is that you can update the core files and a 3rd party child theme and still keep your customizations.

 

In order to use LESS CSS within your PageLines Customization plugin, you will first need to create a style.less file using your favourite text editor and upload to the PageLines Customization folder, the style.less file replaces your style.css file, so all custom CSS needs to be added to your style.less from now on. Adding a style.less file will let you use all the features of LESS, just as a child theme would. If you don’t need sections, and want to utilize a code editor, this is the way to go.

 

 

For information on how to use and install the customize plugin, click

Please Login or Register to see this Hidden Content

 

 

[osgzach]

Yeah I get most of that.

 

But what I was intimating at was -  I'm not making the logical connection of how my site could -not- break under the following circumstance:

 

I'm using  Customize,  so I've got my  style.css which I'm filling with my overrides.   But let's say something major has changed,the CSS design itself changes from one update to the next (I don't mean just the properties of a given ID, I mean the actual name / combination of ID's and class properties)  because maybe you guys have found an optimization, or fixed something that concerned you, etc..

 

If I am overriding CSS that has been significantly modified,  or no longer exists -   I just end up with CSS that's not actually applied anywhere,  the result being my site no longer renders as intended = broken.

 

And I suppose that is really the only situation I am concerned about.    Pagelines appears to be a mature product however,  so I'm going to go out on a limb and assume such a situation would be pretty rare at this point.   So stepping back to my original comment about  duplicating the actual CSS contained in the base that I am overwriting, in my style.css  (thus allowing me to sync save changes in Firebug w/CSSUpdater since it will actually detect the CSS to modify - making editing extremely easier on my part).   It leaves me to contemplate if it might actually be worth doing.

[Danny]

Hi,

 

I honestly dont think we have ever made any changes to the ID or classes in our Framework, so I don't think you need to worry about that to be honest. However, if we were to make any such changes, it will be made clear in both our blog and the changelog.

 

Worst case scenario, if we do change some class or ID name(s), then you're correct that your custom CSS will no longer take effect of that element. But it would be super easy to diagnose the issue and if you inspect the element that has the styling missing, you can easily update your custom CSS with the new class/ID name.

[James B]

Hi Kate please open a new post for your topic

[Rob]

Kate,

Proper netiquette is to post your issue as a new topic instead of hijacking onto someone else's, which is considered inappropriate. Your topic may sound related, but it requires direct attention, so please post separately. 

 

Thanks for your understanding as we want to provide you and everyone with more specific resolutions.

[kate1000]

oops -  rrookie mistake I dont want to be ahijacker! - I havent found wehre these rules and ettiquete are   "posted"  ..{ pun - not funny .... :-/ ... I know...} Sincerely sorry Mr. Egg you have been such help to me thusfar on posts that I did finally figure out how to make. Kate

[catrina]

Do you need further assistance with the CSS?

[osgzach]

Not sure if that was addressed to me or Kate... ?

 

I'm doing fine for now, myself..   I've developed an editing routine I am quite comfortable with and don't need any further assistance.

 

 

Kate -  you likely will not find those rules posted anywhere, except maybe burried in an FAQ or some thing.    Like a lot of social rules in the real world,  rules on Forums have evolved over the years and some have risen to become the standard across many "communities" across the Internet..   So in a way it is just  "common sense" to a lot of people and most will assume everyone knows these rules too -  think of it like moving to a small town from the big city,  and doing something completely innocent, that offends the locals.   Over time you just naturally learn & pick up those rules yourself.