Jump to content


Photo
- - - - -

New to DMS and lost.


  • Please log in to reply
7 replies to this topic

#1 quintinm

quintinm

    Super Member

  • Members

  • 195 posts
  • Framework Version:DMS2
  • Country: Country Flag

Posted 16 May 2014 - 05:23 AM

Hi Pagelines team.

 

I previously used PL framework and have a few sites running it but as it is not being updated i need to redo those sites and i finally decided to go with DMS.

 

I bought a club membership, installed it on a test site and wow, i am lost.

That is all i can say.

I am sure in time i will figure it out, but i am struggling with really simple things which seemed much easier in framework.

 

Is there a repository of videos or tutorials on how to do things using DMS?

The docs are not really that informative for specifics like how to add / edit each of the sections etc.

How to add the parralax backgrounds and how to target elements when trying to modify them using css.

 

And where can i download the demo content - i read that i can find the demo.xml file on http://docs.pagelines.com/, but after reading through everything i still cannot find it.

 

As i said, i hope it gets easier, but right now i am really freaked out that i might have made the wrong decision...



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16897 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 16 May 2014 - 10:59 AM

Hi,

 

If you can provide a list of things you're having trouble with, we will try and assist you. We are also aware that our documentation isn't that informative at the moment.

 

Regarding your two questions:

 

1. To add a Parallax effect to a background, you simply need to select the Area Styling option from either your Header Template Area, Template Area, Footer Template Area or the Canvas section.

 

https://cloudup.com/czERGT4gY8T

 

2. To target a specific element to add custom CSS, you will want to use your Browsers built-in developer tools. I would recommend Chrome. When you inspect the element, you will find that it has a number of classes which you can use to target that element/section etc...



#3 quintinm

quintinm

    Super Member

  • Members

  • 195 posts
  • Framework Version:DMS2
  • Country: Country Flag

Posted 16 May 2014 - 11:52 AM

Hi Danny.

Can you explain how to target a specific element?

Do i need to give it a name in the "Custom Styling Classes" area and then target that in the "custom" section?

Can i give it an ID or just a name?

So do i fill in "#itemname" or just "itemname"

 

Thank you.



#4 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 16 May 2014 - 06:23 PM

@quintinm So do i fill in "#itemname" or just "itemname".... no... classes are defined by a point. For instance: define your custom class ( and try and keep away from class names pagelines or wp might use). This class can be written either in your back end (WP admin > Pagelines > DMS Fallbacks > Custom LESS) or in the live editor (</> Custom). If the latter, you need to press Cntrl + Return to see it as a live preview. If you dont do this and just publish, your custom class might not be saved. From experience... I like to write it elsewhere and paste in, because I cna be very absent minded!

 

.myfavcolor {

  color: #66ccff;
  text-weight: 800;
}
 
In custom styling classes, you would reference YOUR custom class by adding myfavcolor (with no point as you are referencing the class label). This will then render whichever section you are applying it to, making all the text 'bolder' and turning the text a light blue. Once you have defined a class, you can also use it in your html....
<div class="myfavcolor">This IS my favourite colour!!!!</div>
 
Sometimes you just want to add some straight forward CSS to a section very locally and this is where you can use Inline Styling.
 
color: #66CCFF; Text-weight: 800;
 
A simple trick to discover whether you are dealing with classes, ids etc with chrome developer is to right click on an item and select copy CSS path. This will get you started on targeting whatever it is you want to target. Use the Chrome developer, in much the same way you use Firebug, and change CSS to view your changes in action
 
# is for ids of things like sections #mediaboxughehe, #pl_areauhehehe etc. itemnames do not really exist , bar from the context of those defined by core CSS style sheet. ie h1,h2,h3...
 
Targeting a mediabox h2 in your custom LESS, as an example
 
#mediaboxuhehehe h2 {
  color: darkblue;
  font-size: 60px;
  line-height: 1;
  line-spacing: -1px;
}


#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 16897 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 May 2014 - 11:11 AM

I have explained how to target a specific element above, which you will need to use Chrome developer tools. If you want to learn more about the power and usefulness of Chromes dev tools, you should check out this free online course/interactive tutorial - https://www.codescho...scover-devtools

 

The Custom Classes field allows you to add custom classes to your element or section class(es), this can be extremely useful if you want to add unique styling to that element or section.

 

The way it works is, you add a class name, not CSS or a class name with a period at the beginning, you just add the class name. For example:

 

Lets imagine that you have added a Masthead to your template and you would like for it to have a blue background color. You could add the following to your Mastheads Custom Classes field.

 

blue-bg

 

Then save the changes, now goto your Custom CSS/LESS editor and add the following:

 

.blue-bg { background-color: #428BCA; }

 

If you save this changes and then refresh your website, then your Masthead will now have a blue background.

 

Of course this is a super basic example and the Custom Classes field can be expanded, giving you a lot of control and customization possibilities, by adding multiple classes.

 

See our documentation for more information - http://docs.pageline...on-area-styling


  • batman, GetMeWebDesign and Aires like this

#6 quintinm

quintinm

    Super Member

  • Members

  • 195 posts
  • Framework Version:DMS2
  • Country: Country Flag

Posted 19 May 2014 - 06:31 AM

 

A simple trick to discover whether you are dealing with classes, ids etc with chrome developer is to right click on an item and select copy CSS path. This will get you started on targeting whatever it is you want to target

 

Hi @GetMeWebDesign - thanks for this tip!

 

 

Thanks for your comments too Danny, really appreciate the input.



#7 quintinm

quintinm

    Super Member

  • Members

  • 195 posts
  • Framework Version:DMS2
  • Country: Country Flag

Posted 19 May 2014 - 08:35 AM

@Danny, i have just gone through some of the videos on codeschool - what a great resource, thanks for the tip.

One of the items they mention is that you can edit and save the styles directly to the stylesheet through chrome dev tools.

 

But i assume this is not the way to do it when using DMS?

I assume we should make the changes using dev tools and then copy and past them to the (Custom LESS) or in the live editor (</> Custom)

 

Please let me know, thank you.



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 16897 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 19 May 2014 - 09:17 AM

I always test the code in Dev tools, but then copy and paste it into a code editor and then put the properties in the correct order etc...

 

See here for more information on how you should format your CSS - http://codeguide.co/

 

As for a code editor, you really can't be SubLime Text, but I have also started using Atom by GitHub.

 

http://www.sublimetext.com/

https://atom.io/