titlebars with background in theme colours

[dut]

Hello!

Since I rely heavily on title bars or 'dividers' with coloured backgrounds to separate different sections of information in a post on my site, I was wondering if it was possible to create them with a tag or with a plugin, that automaticly changes the colours to theme colours when the user changes themes?

It annoys me quite a bit when the theme is red, and the title"bars" are blue. 

Right now I cant achieve the look without using coloured tables:


[table style="text-align:center;background-color:rgb(48, 55, 90);width:100%;"][tbody][tr][td][font color="#faf9f0"][b]Title here[/b][/font][/td][/tr][/tbody][/table]

text here





Hope anyone can help!

[Kami]

Jan 18, 2024 11:47:18 GMT -8 dut said:

Hello!

Since I rely heavily on title bars or 'dividers' with coloured backgrounds to separate different sections of information in a post on my site, I was wondering if it was possible to create them with a tag or with a plugin, that automaticly changes the colours to theme colours when the user changes themes?

It annoys me quite a bit when the theme is red, and the title"bars" are blue.

Right now I cant achieve the look without using coloured tables:


[table style="text-align:center;background-color:rgb(48, 55, 90);width:100%;"][tbody][tr][td][font color="#faf9f0"][b]Title here[/b][/font][/td][/tr][/tbody][/table]

text here





Hope anyone can help!

Plugin Request Board

Directing you immediately to plugins, as this is not possible within theme settings or even layout templates. You may also want to check the [Style Tag Plugin] and see if its [newclass] function will allow you to declare the properties of that class in the individual theme CSS -- not sure if that works that way but it's worth trying out.

[dut]

alright! Thank you!

[Chris]

Jan 27, 2024 1:38:05 GMT -8 Chris said:

As you've probably concluded, BBCode tags don't generally allow classes, but there was one exception introduced as a byproduct of the work that was done on V6 with TABLE, TD, and TH now retaining a class. With those, we now have the ability to create a class hierarchy within posts to mimic some UI elements and inherit the CSS rules that apply to those elements.

Test Button 1

New Button

Unfortunately, the .title-bar is required to be a direct descendant of .container in order to get the rule applied to it, and tables alone cannot accomplish that...

Dialog title-bars which are generally identical to container title-bars do not have this issue however so a code such as [table class="ui-dialog"][tbody][tr][td class="ui-dialog-titlebar"][table class="ui-dialog-title"][tbody][tr][td]Row 1 column 1[/td][/tr][/tbody][/table][/td][/tr][/tbody][/table]

would produce

Row 1 column 1

SPOILER: Click to show

• 

• 

• 

Barring that solution, there is the Styles plugin, which will give you the ability to apply a class to any in-post element, thus giving you the widest ability to build the .container>.title-bar h2 CSS hierarchy within the post and have the CSS rule then apply to your title-bar element.

[dut]

Thank you! Do you know if its possible to center and "stretch" the created element so it becomes a bar that fits the width of the post?`Or would I need the styles plugin to achieve that?

[dut]

or, do you know the code needed for me to use in the styles plugin, so the colors matches the current theme?

[Chris]

[table style="width:100%"][tbody][tr][td class="avatar-wrapper"][div style="height:2.5rem"][table class="ui-dialog" style="width:100%"][tbody][tr][td class="ui-dialog-titlebar"][table class="ui-dialog-title" style="width:100%"][tbody][tr][td]Row 1 column 1[/td][/tr][/tbody][/table][/td][/tr][/tbody][/table][/div][/td][/tr][/tbody][/table]

Row 1 column 1

SPOILER: Click to show

• 
  
  

• 
  
  

•