• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Different titleBar styling per node

This is a rough guide that will allow you to style your titleBar in the forum_view are

Shelley

Well-known member
#1
Shelley submitted a new resource:

Different titleBar styling per node - This is a rough guide that will allow you to style your titleBar in the forum_view are

View attachment 62064

Summary: Look at this as a guide since your own node ID's will most certainly differ. Obviously, you would style your own titlebars and use your images styling to your preference

What this enhancement will do is allow you to style your titleBars differently per node and add icons to each part of the titleBar (optional). This enhancement change affects your forum_view area.

Install: The css goes into your EXTRA.css template. But again you...
Read more about this resource...
 
Last edited:

Russ

Well-known member
#2
It's the little things that make a difference :), customizing on a node basis or page basis shows the extra effort on a site, nice guide Shelley.
 

Shelley

Well-known member
#3
It's the little things that make a difference :), customizing on a node basis or page basis shows the extra effort on a site, nice guide Shelley.
Thanks Russ. :) Absolutely agree, the little extra effort and minor touches always make the world of difference.
 

mauzao9

Well-known member
#4
I love CSS, so i love @Shelley because i can't create such awesome things by myself.

I made it blocky and tried to make one outline to make it look better into my style. Works okay on all browsers, expect... Firefox.



EDIT: I'm trying to make this new code look like that, so this is working correctly with Firefox and as the same border style.
 
Last edited:

Shelley

Well-known member
#5
I love CSS, so i love @Shelley because i can't create such awesome things by myself.

I made it blocky and tried to make one outline to make it look better into my style. Works okay on all browsers, expect... Firefox.



EDIT: I'm trying to make this new code look like that, so this is working correctly with Firefox and as the same border style.
I tried using the outline-offset but that didn't seem to yield any positive results. I'm still looking into it but perhaps if someone has the solution they could perhaps post the solution.
 

Shelley

Well-known member
#6
I love CSS, so i love @Shelley because i can't create such awesome things by myself.

I made it blocky and tried to make one outline to make it look better into my style. Works okay on all browsers, expect... Firefox.



EDIT: I'm trying to make this new code look like that, so this is working correctly with Firefox and as the same border style.
Probably a terrible way of doing it but i added padding-bottom: 15px; and that seemed to correct it.
Screenshot_30.png
 

mauzao9

Well-known member
#7
Probably a terrible way of doing it but i added padding-bottom: 15px; and that seemed to correct it.


I did use what you had already the box shadow inset to make it look like it was, it looks better being a shadow instead of border>outline (what firefox is not supporting here for some reason).
The last challenge to me will be add one background to the right that goes "behind" the title text instead of "collide" with it when responsive active.

Thanks for this, it looks awesome on this dark blocky style we use.
 

Lisa

Well-known member
#8
Did this on that green banshee style I was doing months and months ago. Didn't even consider releasing it as a resource. . .rather you than me ROFL :D
 

Shelley

Well-known member
#9
you want to hide the image in responsive that is floated to the right?

you could add something like the following where your class is the classes you want to hide or adjust in some way

Code:
@media (max-width:@maxResponsiveNarrowWidth)
{ .yourclass {display: none !important;} }
 

mauzao9

Well-known member
#10
you want to hide the image in responsive that is floated to the right?
you could add something like the following where your class is the classes you want to hide or adjust in some way
Code:
@media (max-width:@maxResponsiveNarrowWidth)
{ .yourclass {display: none !important;} }
Not hide, like avforums just did, if you see it with a small window the image keeps floating behind the text instead of collide with it. It's something really nice.
 

Shelley

Well-known member
#11
Not hide, like avforums just did, if you see it with a small window the image keeps floating behind the text instead of collide with it. It's something really nice.
I haven't seen it. I think you would be best asking stuart how he accomplished this as I want to keep support in this thread at a minmum. Don't mean to sound harsh but it's a basic guide, a kind of use is as is. :)
 

yavuz

Well-known member
#16
@Shelley I'm installing it now, would I need to change your css code like this:

Code:
.class1 .forum_list .titleBar {
  background: #5e29c6; /* Old browsers */
  background: -moz-linear-gradient(left, #5e29c6 0%, #5c2db2 50%, #37206b 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5e29c6), color-stop(50%,#5c2db2), color-stop(100%,#37206b)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* IE10+ */
  background: linear-gradient(to right, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* W3C */
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #59358a;
  box-shadow: 0 0 1px #bb9dc7 inset;}

.class1 .forum_list .titleBar h1 {color: #dfcffc; text-shadow: 0 1px 3px #33163f;}
.class1 .forum_list .titleBar h1:before {
  background: url("@imagePath/xenforo/icons/icons&f.png") no-repeat center left transparent;
  content: "";
  padding-left: 45px;}
class1 for node21, forum_view to forum_list?
 

Shelley

Well-known member
#17
@Shelley I'm installing it now, would I need to change your css code like this:

Code:
.class1 .forum_list .titleBar {
  background: #5e29c6; /* Old browsers */
  background: -moz-linear-gradient(left, #5e29c6 0%, #5c2db2 50%, #37206b 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5e29c6), color-stop(50%,#5c2db2), color-stop(100%,#37206b)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* IE10+ */
  background: linear-gradient(to right, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* W3C */
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #59358a;
  box-shadow: 0 0 1px #bb9dc7 inset;}

.class1 .forum_list .titleBar h1 {color: #dfcffc; text-shadow: 0 1px 3px #33163f;}
.class1 .forum_list .titleBar h1:before {
  background: url("@imagePath/xenforo/icons/icons&f.png") no-repeat center left transparent;
  content: "";
  padding-left: 45px;}

class1 for node21, forum_view to forum_list?
This isn't the resource that will accomplish that. This resource however may help you though. http://xenforo.com/community/resources/multi-coloured-node-li.1733/
 

Shelley

Well-known member
#19
Just a headsup. If you happen to have a description associated with your nodes then the following css for that (or rather classes) is as follows. I've updated the release post to reflect that you may have a description and included the css to style that. (i'm referring to the small text in the screenshot (below) .

Just thought I'd mention that rather than updating the release.

Screenshot_31.png
 

Shelley

Well-known member
#20
You can change the node icon and the background with waindigo's addon but not the color. The one you posted changes the entire node block's color :D I'm no css pro so I was looking for a code if it has lready been shared.
The css included in the post I linked to does indeed style the whole block, but it also has the css to style the area you are looking to style the way you want it. You'll have to remove some of the css from the other areas that you don't want styled.
 
Last edited: