Jump to content


Photo
Flatten

Flatten Theme Customizations

flatten theme css

  • Please log in to reply
7 replies to this topic

#1 jacecar

jacecar

    Member

  • Members

  • 20 posts
  • LocationUpper Sandusky, Ohio
  • Framework Version:DMS
  • Country: Country Flag

Posted 26 November 2013 - 03:45 PM

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.



#2 Danny

Danny

    Is Awesome!

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

Posted 27 November 2013 - 11:09 AM

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.



#3 jacecar

jacecar

    Member

  • Members

  • 20 posts
  • LocationUpper Sandusky, Ohio
  • Framework Version:DMS
  • Country: Country Flag

Posted 27 November 2013 - 11:22 AM

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.



#4 ewatchman

ewatchman

    Advanced Member

  • Members

  • 31 posts
  • LocationMichigan
  • Framework Version:1.4.1
  • Country: Country Flag

Posted 27 November 2013 - 05:53 PM

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?



#5 jacecar

jacecar

    Member

  • Members

  • 20 posts
  • LocationUpper Sandusky, Ohio
  • Framework Version:DMS
  • Country: Country Flag

Posted 28 November 2013 - 08:02 AM

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.



#6 tmeister

tmeister

    Super Member

  • Members

  • 180 posts
  • LocationValle de Bravo, México
  • Country: Country Flag

Posted 28 November 2013 - 03:27 PM

@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



#7 ewatchman

ewatchman

    Advanced Member

  • Members

  • 31 posts
  • LocationMichigan
  • Framework Version:1.4.1
  • Country: Country Flag

Posted 02 December 2013 - 11:16 AM

Enrigue, thanks

 

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



#8 tmeister

tmeister

    Super Member

  • Members

  • 180 posts
  • LocationValle de Bravo, México
  • Country: Country Flag

Posted 02 December 2013 - 03:47 PM

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

 

Best,

Enrique.







Also tagged with one or more of these keywords: Flatten, flatten, theme, css