Jump to content

Archived

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

jacecar

Flatten Theme Customizations

Recommended Posts

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

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

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

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

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

@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

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

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

    • Kedark
      By Kedark+
      Hello, I need help. Can and how to do it. I need to add more page appearance templates (page attributes). At the moment it's default and FRAMEWORK A, FRAMEWORK B etc. I need to add two more. How can I do this.
      Unfortunately, I did not find such a thread on the forum.
      Regards
      Radoslaw
    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I have noticed that my primary sidebar becomes intermittently invisible when browsing through various blog articles on michaelkummer.com/blog.
      See:
      https://www.dropbox.com/s/z646sgoa3mfjl1j/Screenshot 2018-07-12 15.57.46.jpg?dl=0 and https://www.dropbox.com/s/vdledzzgginvwgv/Screenshot 2018-07-12 15.57.57.jpg?dl=0
      Upon refresh, the sidebar appears. I have been using the following CSS code to hide the sidebar on mobile without any issues. 
      @media only screen and (max-width: 993px) {
      /* hide sidebars */
           .plsb {
              display: none !important;
          }
      }
      I tried to add the following CSS to force the sidebar to show on screens that are wider than 994 pixels but to no avail. Any clue what could be causing this issue?
    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I am using the LESS/CSS Pagelines extension and tried to add the following code to make use of FontAwesome:
      a.c2a:before {
          content: "\f07a\00a0";
          font-family: "Font Awesome 5 Pro";
          Font-weight: 900;
          font-style: normal;
          font-weight: normal;
          text-decoration: inherit;
          padding-left: 4px;
      }
       
      The issue is that as soon as I have the CSS via the Custom Styling text box, Pagelines (or the extension) strips out the backslashes (\). As a result, I had to abandon the CSS/LESS extension and instead add all my CSS code to a separate .css file.
      Is there a fix or workaround for this?
      Thanks
      Michael
    • glyph.marketing
      By glyph.marketing+
      Hello, I am having a problem similar to that experienced by Michael Kummer here. We have pages that show this automatic scrolling issue (examples here and here) and it is sufficiently annoying that we have seen customers bounce while trying to convert. Strangely, it only happens at specific resolutions, so it can be difficult to reproduce. In general we can only consistently reproduce it on a 4k resolution with a browser width between 1517 and 1536px. 
      Thanks to Michael Kummer's help we were able to set the overflow-anchor property to none in the entire body, which fixed the issue as far as we can tell, but also obviously disabled scroll anchoring for the whole site. I tried applying it to the specific element that looked like it was being reloaded, which was the PL Meganav extension, but that was unsuccessful. 
      Can anyone help us figure out which element or ID we can apply this property to, so that we can fix the scrolling issue but not disable scroll anchoring for the entire site?
      Thank you - 
      Glyph Language Services
    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
×