Different titleBar styling per node

[Shelley]

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...

 

[Russ]

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]

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]

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.

 

[Shelley]

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]

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.

 

[mauzao9]

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]

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

 

[Shelley]

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

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

 

[mauzao9]

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

@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]

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.

 

[Code Monkey]

Nice Resource as always Shelley. I may incorporate this on my new Style. Though I will probably try it with font-awesome instead of images.

 

[yavuz]

Looks awesome @Shelley, thanks for sharing. Can we do this for forum_list node titles as well?

 

[mauzao9]

Looks awesome @Shelley, thanks for sharing. Can we do this for forum_list node titles as well?

There's one addon that allows awesome customization to the node-list, i'm using now with this tweak to titles
http://xenforo.com/community/resources/extra-node-information-by-waindigo.2041/
With that + CSS classes you can achieve everything.

 

[Shelley]

Looks awesome @Shelley, thanks for sharing. Can we do this for forum_list node titles as well?

Sure. If your referring to the categorystrips. I posted a guide that you'll find useful how to do that a while back in this area.

Or use waindigo's add-on if that will do what your after.

 

[yavuz]

@Shelley I'm installing it now, would I need to change your css code like this:

.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]

@Shelley I'm installing it now, would I need to change your css code like this:

.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/

 

[yavuz]

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/

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 I'm no css pro so I was looking for a code if it has lready been shared.

 

[Shelley]

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.

 

[Shelley]

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 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.