Jump to content

Archived

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

jacecar

Flatten Theme Customizations

Recommended Posts

jacecar+    1
jacecar

I've got two questions related to the Flatten theme:

 

First, it comes in a stark white format, and changing the default colors to make it a dark theme only goes so far.  I still end up with all kinds of things that don't display correctly, because they assume I'm going to leave the colors alone.  Even if I change the white to light-blue or something, there are still a bunch of white elements (the menu bar at the top, for one) that I cannot change within the configuration options.  However, even with default colors, the footer never quite displays correctly, depending upon what browser I test with.  I can get the site to look good, or the footer, but not both at the same time.  I know, it's my limitation.  By the time someone answers this, I'll probably figure it out on my own.

 

To be honest, even Windows as an OS and Word as an application have trouble with dark themes.  You can change every single color to adjust, but there are still built-in elements that have hard-coded colors, making menus or status lines foggy, if not completely unreadable.

 

Second, and more technically, the theme includes a section called PortfolioFlat.  Changing the 'button style' (from the default) seems that it should change the "Showing Sets" color, the "Hover" color, and the Button itself, but it doesn't.  Everything except the button stays the same default, unless you adjust SITE colors, and then you associated changes here.  Changing the button to black changes it to white (unreadable white on white), Changing it to dark blue leaves it green, and so on.  Because it assumes white lettering, only the green and red button styles are really readable.

 

What I want to do should be rather simple, but I couldn't find it:

 

Not counting the color changes, I would like to change the width of the image display (once you click on one of the portfolio items) OR make the text wrap around the image, similar to the way text wraps around images in blog or page posts.  I couldn't figure out how to do either.  The code for PortfolioFlat is buried fairly deep, and comments are few and far between.  In addition, it appears to strip most of the styles and formatting from the post, keeping only the "header" types, I believe.  I don't know why it would need to do that.  Formatted text should be left up to the user.


>jace

@Jacecar

me@jacecar.com

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

We do not provide support for third party store extensions, therefore in future can you be sure to post your question/issue in the store forum and select the prefix for your product when adding your title to your topics.

 

I have moved the topic for you and added the correct prefix, the developer should now be notified.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jacecar+    1
jacecar

Sorry about the misplaced post.  I didn't see the author's name in the list, so I wasn't sure where to pose the question.

 

I solved the problem with the dark theme, at least partially.  If I set the main background color to #000000 and adjust the other colors, I still have some issues, but the following snippet fixed it:

 

div.pl-area-pad.fix {
  background-color: #000;
}

 

The above fixes the header bar, the Flat Nav navigation bar.  It handles everything except for menu drop-downs, which stay white until you add the following:

.menu-item-object-page {
  background-color: #000;
}

 

There is no outside border, but there appears to be a divider between individual drop down elements, using the main text color for its attribute.

 

My second issue (with the portfolio section) is still confusing me.


>jace

@Jacecar

me@jacecar.com

Share this post


Link to post
Share on other sites
ewatchman    2
ewatchman

I have a similar question so I thought I would post it here: I purchased the Flatten theme and wish to change the background color to contrast with the actual white text box color, to make for easier reading of blog pages. I see where the background color can be changed globally in the theme settings, but it changes EVERYTHING, which sort of defeats the purpose of changing the background color. Why is it called "background" if it doesn't reside in the background? Is there some way to keep the text pages white and make the background something else, like a subtle shade of grey?

Share this post


Link to post
Share on other sites
jacecar+    1
jacecar

One thing I noticed while messing with images: Setting the PageLines option for "LazyLoad Images" will break the Flatten "PortfolioFlat" display of its main image.  

 

The portfolio will display the layout (12 or 20 or however many Projects you have defined) but when you click on one to bring up the main image, it just displays a blank image along with the text description and push button.


>jace

@Jacecar

me@jacecar.com

Share this post


Link to post
Share on other sites
tmeister+    38
tmeister

@jacecar: About the images, the main image in the details is loaded via ajax (on demand) and the "Lazy Images" do not work fine with ajax content.

 

@ewatchman: yes, this is how the Parent Theme (DMS) handle that options, to accomplish what you need do the follow:

 

In the editor mode go to Layout & Nav > Display Mode and select "Boxed Display" save

Settings > Color & BG > Site Base Colors Background Base Color and select the color you want to use in the content, then

Settings > Color & BG > Back Image, Upload a solid color image (black)

Settings > Color & BG > Background Image Setting > un-check the Fit image to page option

Settings > Color & BG > Background Repeat > select Repeat, save.

 

Best,

Enrique


Enrique Chavez - Premium DMS Themes, Sections and Plugins.

http://enriquechavez.co

Share this post


Link to post
Share on other sites
ewatchman    2
ewatchman

Enrigue, thanks

 

Is it possible to have a "Boxed display" on one page (local) and not site-wide (global) ?

Share this post


Link to post
Share on other sites
tmeister+    38
tmeister

No, sorry, that is a global configuration, you can't use both in one install.

 

Best,

Enrique.


Enrique Chavez - Premium DMS Themes, Sections and Plugins.

http://enriquechavez.co

Share this post


Link to post
Share on other sites

  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • Objectif-Mariage
      By Objectif-Mariage+
      Hello. 
      I have just realized that CSS (Less plugin) , is not working..... I have disable all plugins (except PL CUSTOM LESS and PL5) , and ... it's not working ... 
      It's not the first time. Usually I had trouble with a plugin name Autoptimize , but it's Desactivate now , all memory have been purge, and it's still not working! :-/ So it's not from this plugin. 
      NB : When I am logged on my website, if i go on the black wordpress dashboard bar, go on the PL icon, clic on </> LESS/CSS => then the page suddenly apply the CSS .... But As soon that i reload the page, nothing. I think the problem is that the plugin LESS/CSS does not load properly (if I can say that with my simples words).
      I order to keep the site "good looking" I have temporally copy/paste all my LESS code in a plugin : Script n Styles that apply the LESS/CSS code... but it's not a solution for long time.
      Can someone help me ? Did I do something wrong ? Is it an update ? 
       
      my website : https://www.wedding-photography-minneapolis.com
    • Jason
      By Jason+
      Feel free to delete this post if its not helpful or its just plain wrong.
       
      I though it might be useful to share how I customize the size of the builder. (reduce my eyestrain )
      1 - install stylerbot extension in chrome (stylerbot keeps this css every time you access the url)
       
      2- add this css to stylerbot for the site you are working on
      .CodeMirror {
          font-size: 14px;
          height: 600px;
      }
      .pl-workarea.pl-has-sidebar .pl-workarea-sidebar-container {
          right: 0px;
          width: 500px;
      }
      .pl-workarea.pl-has-sidebar .iframe-container {
          right: 500px ;
      }
       
      change sizes to suit.
       
      Cheers.
    • Jason
      By Jason+
      Hi.
      I can't seem to get the Teamwork section to accept custom css. I am trying to change the padding from 7em to 1em on the splash part
      I have tried
        .pl-sn-teamwork .pl-tw-splash {
          padding-top: 1em;
          padding-bottom: 1em;
        }
       
      This works in chrome inspect but when added to custom css nothing happens.
      I have also tried most of the classes I can see accoiated with this section but again nothng seems to happen.
      Any ideas?
×