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

  1. Shelley

    Shelley Well-Known Member

    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

    Read more about this resource...
    Last edited: Nov 28, 2013
    Mirovinger, mauzao9 and Russ like this.
  2. Russ

    Russ Well-Known Member

    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 likes this.
  3. Shelley

    Shelley Well-Known Member

    Thanks Russ. :) Absolutely agree, the little extra effort and minor touches always make the world of difference.
  4. mauzao9

    mauzao9 Well-Known Member

    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: Nov 28, 2013
    Shelley likes this.
  5. Shelley

    Shelley Well-Known Member

    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.
    mauzao9 likes this.
  6. Shelley

    Shelley Well-Known Member

    Probably a terrible way of doing it but i added padding-bottom: 15px; and that seemed to correct it.
    mauzao9 likes this.
  7. mauzao9

    mauzao9 Well-Known Member


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

    Lisa Well-Known Member

    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 likes this.
  9. Shelley

    Shelley Well-Known Member

    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;} }
  10. mauzao9

    mauzao9 Well-Known Member

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

    Shelley Well-Known Member

    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. :)
  12. Code Monkey

    Code Monkey Well-Known Member

    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.
    Shelley likes this.
  13. yavuz

    yavuz Well-Known Member

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

    mauzao9 Well-Known Member

    yavuz likes this.
  15. Shelley

    Shelley Well-Known Member

    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 likes this.
  16. yavuz

    yavuz Well-Known Member

    @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?
  17. Shelley

    Shelley Well-Known Member

    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 likes this.
  18. yavuz

    yavuz Well-Known Member

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

    Shelley Well-Known Member

    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.

  20. Shelley

    Shelley Well-Known Member

    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: Nov 29, 2013

Share This Page