Jump to content

Archived

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

jmad

Buttons and colors in DMS

Recommended Posts

jmad

I added css to change the colors/styles of the basic buttons so they would be consistent across the Masthead, Highlight, etc.  When I do this it also changes the buttons in the DMS interface.  Is there a way to keep that from happening?  Is this case the new buttons are White and although not the end of the world... sort of annoying.

 

 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

You shouldn't really override the style of the default buttons, you should add your own in my opinion. You can follow this guide here - http://support.pagelines.me/docs/customization/create-custom-buttons/

 

In regards to the Masthead and other sections, you will want to create a child section and edit the section.php file and add your own button choices there.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Danny- those instructions at the support page were great.  I hadn't seen those as I've been going to these support docs http://docs.pagelines.com/configure/configuring-sections.  These were really helpful.

 

Where would I find the best instructions on creating a child section?  I've installed Nick's Base Theme and added Viewer sections to Nick's Base Theme sections.  Got it to work.  

Share this post


Link to post
Share on other sites
jmad

Just so I'm clear.  The base theme mentioned is actually Nick's Child Theme or  is there a base theme available directly from PL?

Share this post


Link to post
Share on other sites
jmad

Thanks.  So what's the best option for working locally with DMS and not on a live site?  What parts of Nick's theme should I be renaming and should we be loading in new images to make this our own? My first try I just dropped the file in as Nick's-base-theme-master.  

 

 

Also when following these instructions....

 

Once we have determined that the Base Theme is our customization method, we need to download a fresh copy of DMS from yourPageLines Account . Once downloaded, extract the dms.zip and navigate to pagelines → sections, here you will find multiple folders each representing the core sections included with PageLines DMS.

Locate the section in which you wish to override or customize, for this example we will be overriding the iBox section. Now open your FTP client, connect to your server and navigate to the following directory: /wp-content/themes/dms-template-theme/sections/.

Upload the iBox section folder to Base Theme at /wp-content/themes/dms-template-theme/sections/ as a folder and like magic, we have a child section of iBox, ready for us to modify.

...I'm taking a core section from my computer and uploading it to the child theme....say Hero.  Do I need to delete that core section from the Parent DMS Theme?  Do I make the changes to the section after I upload it or before?  Really new to this still...sorry for the basic questions. 

Share this post


Link to post
Share on other sites
James B

Hi Jmad 

 

The best option for working on a local setup would be using something like MAMP - http://www.mamp.info/en/index.html

 

You can use the base theme as it is, no need to change any of the names/images. But if you want to create your own personalized child theme you can, simply go into the style.css of the base theme and change the name, author and the description. You can upload your own screenshot of the finished theme to replace the screenshot.png and thumb.png (your images will still need to be called screenshot.png and thumb.png).

 

You won't need to delete any core sections, anything inside the child theme will override the core version. I always say make changes before you upload using an editor like sublime on a local setup, then you can make your changes and make sure everything's working correct prior to uploading to the live site.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
jmad

Danny"] or @[member="James B,

 

Okay.  Trying to make sure I do this correctly.  I want to change the appearance of the buttons in callout and hero.  I have the code and it works in the CSS editor of DMS.  So to get this the correct way. 

 

1- Installed Nick's child theme

2- Fresh copy of DMS on desktop

3- Upload callout and hero sections to /wp-content/themes/nicks-base-theme-master/sections

4-??  What file do I edit to change the CSS?  What tool/software is best to use?

 

What happens if callout or hero get updated?  How will I know and how do you then upgrade.

Share this post


Link to post
Share on other sites
Danny

The only software you need a decent code editor, you can't really beat SubLimeText 2, then make/add your changes to the sections style.less file and if you want to add additional button colors, just copy the code for the buttons, and then replace them with your own classes.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Have the editor.  So in the section's style.less file I don't see any reference to buttons.  Should I just add my code and custom class there and then add the custom class to the frontend editor in DMS?  To change the callout button do I have to change something in the section.php?

Share this post


Link to post
Share on other sites
Danny

Sorry no just add your buttons to the sections.php file, basically what you're doing is add an option for the new button color. Then add your custom button colors to your custom CSS in either the Custom > Custom CSS/LESS Editor or your style.less file in your child theme.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Can you give me an example of how to add the buttons to the sections.php file?  And if I add my button in the style.less file should it be for the section or the child theme?  I add the button code in style.less versus the style.css file can I also assign values like @mybluecolor: #lldlll;    in the style.less file?

 

 

I see the following in the sections.php  should I add 'mybutton' =>array( 'name' =>  ('mybutton', 'pagelines') ),   assuming my buttons' class is mybutton?

 

array(
'label' => __( 'Select Button Color', 'pagelines' ),
'key' => 'herounit_button_theme',
'default' => 'primary',
'type' => 'select',
'opts' => array(
 
'primary' => array( 'name' => __( 'Blue', 'pagelines' ) ),
'warning' => array( 'name' => __( 'Orange', 'pagelines' ) ),
'important' => array( 'name' => __( 'Red', 'pagelines' ) ),
'success' => array( 'name' => __( 'Green', 'pagelines' ) ),
'info' => array( 'name' => __( 'Light Blue', 'pagelines' ) ),
'reverse' => array( 'name' => __( 'Grey', 'pagelines' ) )
)
)
)
)
);
 
return $opts;
 
}
 
Danny"] or @[member="James B - Do I have this correct and should I update the functions.php section of Nick's Base Theme to a custom theme name or leave it alone?

Share this post


Link to post
Share on other sites
jmad

@Danny 

 

I got the code above to work in the hero section by adding my own button selection to the Hero and the custom CSS to either the Child Theme CSS or Section CSS, either way it worked.

 

I also got the iCallout button to work by changing out the ...$theme = ($this->opt('icallout_btn_theme')) ? $this->opt('icallout_btn_theme') : 'btn-primary';.... with 'btn-clear'.   This makes the button  However, I would like to be able to select different buttons from the drop down list in iCallout just like I accomplished in Hero.... 

 

array(
'key' => 'icallout_btn_theme',
'type' => 'select_button',
'label' => __( 'Button Color', 'pagelines' ),
),
 
)
)
 
);
 
return $opts;
 
}
 
function section_template() {
 
$text = $this->opt('icallout_text');
$format = ( $this->opt('icallout_format') ) ? 'format-'.$this->opt('icallout_format') : 'format-inline';
$link = $this->opt('icallout_link');
$link_target = ( $this->opt( 'icallout_target', $this->oset ) ) ? ' target="_blank"': '';
$theme = ($this->opt('icallout_btn_theme')) ? $this->opt('icallout_btn_theme') : 'btn-primary';
$link_text = ( $this->opt('icallout_link_text') ) ? $this->opt('icallout_link_text') : 'Learn More <i class="icon-angle-right"></i>';
 
if(!$text && !$link){
$text = __("Call to action!", 'pagelines');
}

Share this post


Link to post
Share on other sites
Danny

You will most likely need to edit the array so its similar to the Hero sections. For example try this (untested):

 

Find this in iCallouts section.php:

 

https://gist.github.com/Dannyholt/88bf843731591e064551

 

Replace with this:

 

https://gist.github.com/Dannyholt/e0aec65968bfad81fcac


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Thanks, I'll work with it.

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×