Creating themes, editing CSS - some thoughts

[ossipetz]

Hallo

I wonder what amount of tweaking is planned for the theme editing?

It is quite good already. So I wanted to start creating a new theme. Part 1: change colors.

I found some of the colors I wanted to change directly when editing the theme. But for some I don't understand where they belong. So I would change a color but don't know where? Maybe a preview what the color effects would be possible (could be a screenshot).

Then I wanted to change the background-color of the posts in a topic. The style that brings the white background is: ".ipsBox:not(.ipsBox_transparent)" - that does not sound like it is post related at all I would have wanted something like cPost (which exists somehow) but I confused where is the best place for some theme changes. I was hoping the CSS classes match closer to my expectations where to find something. For example in a post the information-bar beside every post: you need to change the background color of ".ipsAreaBackground_light". Even with a dark theme - nothing in that class makes me think of "left side of a posting".

 

Then the search in the CSS editor: does it work at all? I like the syntax highlighting of the editor but not if it breaks the browser search.

 

 

[Pete T]

Hallo

I wonder what amount of tweaking is planned for the theme editing?

It is quite good already. So I wanted to start creating a new theme. Part 1: change colors.

I found some of the colors I wanted to change directly when editing the theme. But for some I don't understand where they belong. So I would change a color but don't know where? Maybe a preview what the color effects would be possible (could be a screenshot).

Then I wanted to change the background-color of the posts in a topic. The style that brings the white background is: ".ipsBox:not(.ipsBox_transparent)" - that does not sound like it is post related at all I would have wanted something like cPost (which exists somehow) but I confused where is the best place for some theme changes. I was hoping the CSS classes match closer to my expectations where to find something. For example in a post the information-bar beside every post: you need to change the background color of ".ipsAreaBackground_light". Even with a dark theme - nothing in that class makes me think of "left side of a posting".

 

Then the search in the CSS editor: does it work at all? I like the syntax highlighting of the editor but not if it breaks the browser search.

 

 

​have you added define( 'DEV_DEBUG_CSS', true ); into constants.php this will show where lot css is also you can add own in custom.css 

[ossipetz]

Thanks for your reply. I'm going to try the debug_css setting.

I was just wondering if the CSS classes could contain more semantic information what I'm styling (like boardIndexFrame boardIndexContent or threadFrame, threadRow, postAuthorFrame, postContent). Sometimes I fear to change ipsBox since it sounds like something used on a lot of places.

The color settings for a theme contain around 41 settings but only around 24 distinct colors. So some are probably context related and pretty specific. From a color schema aspect I would have dreamt about background colors, content colors and accent colors. (not to complain just a thought how to simplify creating a new color scheme).

 

Thanks :-)

[opentype]

I was just wondering if the CSS classes could contain more semantic information what I'm styling (like boardIndexFrame boardIndexContent or threadFrame, threadRow, postAuthorFrame, postContent). Sometimes I fear to change ipsBox since it sounds like something used on a lot of places.

You are right, that many names are not specific, but that’s exactly because the are not applied to just a specific place. That’s a good thing. Otherwise similar changes would have to be applied dozens or even hundreds of time.

I found the naming scheme quite good and could easily work with it. I am using Firebug in Firefox. I just click on the item I want to style and it tells me exactly where the styling is defined. Then I just override that in the custom.css. 

If you want to override declarations just in a specific place, which are used in multiple places, then you can to do that in your custom.css, like

#sidebar h3 {
 font-size: 20px;
}

This would only change the headline in the sidebar, not in the main content area. 

[TSP]

I was just wondering if the CSS classes could contain more semantic information what I'm styling (like boardIndexFrame boardIndexContent or threadFrame, threadRow, postAuthorFrame, postContent). Sometimes I fear to change ipsBox since it sounds like something used on a lot of places.

 

​You can use other parameters than class and id on elements to style with CSS too. 

For example, to only target CSS in topics, you could use this in front of the rest of your CSS rule: body[data-pageController="topic"]

Since the body element for a topic contain this: 

<body class='ipsApp ipsApp_front ipsJS_none ipsClearfix' data-controller='core.front.core.app' data-message="" data-pageApp='forums' data-pageLocation='front' data-pageModule='forums' data-pageController='topic' itemscope itemtype="http://schema.org/WebSite">

I think you'll find you can use the other parameters in a lot of the cases where you don't feel the CSS class names are specific enough. 

Thanks to Mark for reminding me how to target it.

[Heyhoe]

On 11/02/2015 at 0:56 PM, TSP said:

You can use other parameters than class and id on elements to style with CSS too. 

For example, to only target CSS in topics, you could use this in front of the rest of your CSS rule: body[data-pageController="topic"]

Since the body element for a topic contain this: 

<body class='ipsApp ipsApp_front ipsJS_none ipsClearfix' data-controller='core.front.core.app' data-message="" data-pageApp='forums' data-pageLocation='front' data-pageModule='forums' data-pageController='topic' itemscope itemtype="http://schema.org/WebSite">

I think you'll find you can use the other parameters in a lot of the cases where you don't feel the CSS class names are specific enough. 

Thanks to Mark for reminding me how to target it.

Hi, I'm trying to target a specific app to hide some data in mobile. I have managed to hide the data on mobile suite wide, but I cannot target the app/page.

This is what is says in the body :

<body class="ipsApp ipsApp_front ipsJS_has ipsClearfix" data-controller="core.front.core.app,core.front.widgets.manager"  data-message=""  data-pageapp="classifieds" data-pagelocation="front" data-pagemodule="classifieds" data-pagecontroller="browse" itemscope itemtype="http://schema.org/WebSite">

So I tried using;

[data-pagemodule='classifieds']

&

[data-pageapp='classifieds']

Both do not work

Can you offer some advice?

--------

Code looks like this (works without the [DATA] info..

/* Smartphones (portrait and landscape) ----------- */  
@media screen and (max-width: 979px) {  
/* Styles */  
 
/*Hide extra details on Classifieds category (Mobile)*/
 
.ipsDataItem_size8 [data-pagemodule='classifieds'] {
  display:none !important;
  }

[opentype]

4 minutes ago, Heyhoe said:

 .ipsDataItem_size8 [data-pagemodule='classifieds'] 

If anything, it must be the other way around. 

[Heyhoe]

So, simple!

I have it the other way around for similar edits and it seemed to work fine.. Oh well Thanks @opentype!

[Heyhoe]

I'm wondering if you could help me with something..

This is what I currently have as a layout:

If I de-select the "Block" and "Padding" attribute, I get this result:

However, I cannot find a way to alter the custom.css to introduce these changes. Which classes should I be targeting to achieve this?

I'm also looking for a way to further target only this page within the application. I have tried [data-pagecontroller='browse'] alongside the existing [data-pagemodule='classifieds']  but this just cancels out both of them. Is there a specific way to implement more than one "data" selector?

Thanks.

EDIT: Just realised which forum this is in! Sorry. I will start another topic in appropriate section.