Welcome to the Soartex forums!

  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Welcome to the Soartex Forums! Consider signing up to get involved!

Archived Custom Forum Theme

Discussion in 'Off Topic' started by Disaster86, May 3, 2013.

Thread Status:
Not open for further replies.
  1. GoldBattle

    GoldBattle Administrator Staff Member

    Looks better. I can't do the download page as that is manged completly out of the themes.

    This code removed all small text from the website so I removed it. It removed the "last posted" etc from the site.
    Code:
    /*replaces mundane "Quick Links" text from drop-downs*/
    .muted  {
        display: none;
    }
    
  2. SoaringDragon

    SoaringDragon Well-Known Member

    So, I got a little irritated with some things in Soartex v2, so I went back to the regular Soartex and made a ton of changes. below is a preview of what those changes do in Chrome (and hopefully other browsers. I tried to be cross-platform, but you never know). Sorry it's a Photoshop link. It was a bit too big to upload ^^"

    Show Spoiler

    [​IMG]

    Here's the css code I used:
    Code:
    .secondaryContent {
        border-top-left-radius: 5px;
        -webkit-border-top-left-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -khtml-border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topright: 5px;
        -khtml-border-top-right-radius: 5px;
        border-bottom: 1px solid #DDD;
        border-right: 1px solid #DDD;
    }
    .subHeading, .heading {
        background-color: #002A42;
        background-image: -moz-linear-gradient(top,#01395E,#002A42);
        background-image: -o-linear-gradient(top,#01395E,#002A42);
        background-image: -webkit-linear-gradient(top,#01395E,#002A42);
        background-image: linear-gradient(to bottom,#01395E,#002A42);
        box-shadow: 0 1px rgba(255, 255, 255, .2),inset 0 1px rgba(255, 255, 255, .4);
        text-shadow: 0 -1px rgba(0,0,0,.25);
    }
    body {
        background: url('styles/soartex/xenforo/xenfocus/header_bg.png') repeat left top;
    }
     
    #moderatorBar {
      background-color: rbga(39, 24, 13, 0.92);
    }
     
    #navigation {
        background: rgba(29, 17, 10, 0.65);
        position: absolute;
        top: 0px;
        width: 100%;
    }
    #content .pageWidth {
        background-color: rgba(60, 41, 26, 0.51);
    }
    #content {
        background: none;
    }
    .top_left_shadow, .top_right_shadow {
        top: 39px;
    }
    h1 {
        color: #FFF;
        text-shadow: 0 0 0 rgba(0, 0, 0, 0), -1px -1px 0 #000;
    }
    .navTabs .navTab {
        margin-right: 0px;
    }
    .navLink {
        line-height: 0;
      font-size: 0;
      color: transparent;
    }
    #logoBlock {
        padding-top: 39px;
    }
    #footer a {
        color: #FFF;
    }
    #copyright, .portaCopy.copyright.muted, .portaCopy.copyright.muted a {
        color: #141414;
        font-weight: bold;
    }
    #skin_copyright {
        clear: none;
    }
    .Menu .menuHeader .muted {
    display: none;
    }
    
    Note: If you want to use the Inspect Element to do what I just did, there is a "New Style Rule" button (+) at the top to the right of the "Styles" header. This will allow you to add new code cleanly. once you have at least on rule, you can click on the "inspector-stylesheet" link to the right of the new definition you made and it will take you to a css stylesheet from which you can add code directly as well as copy to paste in here. Make sure you put your code in a bracketed code tag when posting.

    Also, note that there is a zoom icon in the lower left corner if you go to the photobucket site. You have to click it twice to get to the original size. (irritating, I know. I don't really like Photobucket's new look). Oh and I wanted to use the other logo image (the one Val used), but I didn't know what the URL was for it.

    Oh and Gold, that css definition also takes out the timestamps on the shoutbox as well as some other text. In my code, I changed that to ".Menu .menuHeader .muted" instead. I also figured out how to take out the text with CSS (see ".navLink" in code snippit).
    Sheynx likes this.
  3. Disaster86

    Disaster86 Minecraft Modder

    I see we've turned my CSS style into a forum theme submission thread. I'm cool with that. You wight want to re-size those avatars on the home page so they fit in the centered style. Course I already did that, because this was my thread... oh well! XD Perhaps one day I'll start a project that doesn't get discontinued or over-run :p ...
  4. SoaringDragon

    SoaringDragon Well-Known Member

    Which avatars where? In the shoutbox? In the posts on the left? For the staff? For the Recent Updates?

    Sorry I hijacked it, but we don't have a forum for changes/feedback to the forum. XD (which we should...) Thus it makes more sense to continue it in the thread instead.
  5. Disaster86

    Disaster86 Minecraft Modder

    BEFORE
    AFTER
    Code:
    /*replaces avatar thumbnail holders*/
     
    .avatarHolder  {
        padding-left: 10px!important;
        padding-right: 10px!important;
        box-shadow: #CCCCCC 3px 3px 3px!important;
    }
    That avatar :) You're allowed to make a thread for it, but you'd need admin to approve contributions of course XD
  6. SoaringDragon

    SoaringDragon Well-Known Member

    Ah, yeah in my latest version I address that and a few more changes, haven't posted though. And I didn't use any !important tags because honestly, we shouldn't NEED them. It's a flaw in the CSS coding that should have been addressed with more specificity. Pretty much you have to match the amount of specificity the original CSS uses. I'm not sure how this will look on the other pages.

    Here's a bit more explanation for my code XD
    Code:
    /* Adjusts calendar date corners at the top */
    .secondaryContent {
        border-top-left-radius: 5px;
        -webkit-border-top-left-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -khtml-border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topright: 5px;
        -khtml-border-top-right-radius: 5px;
        border-bottom: 1px solid #DDD;
        border-right: 1px solid #DDD;
    }
     
    /* Changes the static gradient to a CSS3 gradient + highlight (text-shadow) */
    .subHeading, .heading, .sectionHeaders, .discussionList .sectionHeaders {
        background-color: #002A42; 
        background-image: -moz-linear-gradient(top,#01395E,#002A42); 
        background-image: -o-linear-gradient(top,#01395E,#002A42); 
        background-image: -webkit-linear-gradient(top,#01395E,#002A42); 
        background-image: linear-gradient(to bottom,#01395E,#002A42);
        box-shadow: 0 1px rgba(255, 255, 255, .2),inset 0 1px rgba(255, 255, 255, .4);
        text-shadow: 0 -1px rgba(0,0,0,.25);
    }
     
    /* Moves the header background to the actual background */
    body {
        background: url('styles/soartex/xenforo/xenfocus/header_bg.png') repeat left top;
    }
     
    #moderatorBar {
      background-color: rbga(39, 24, 13, 0.92);
    }
     
    /* Moves the navigation bar above the rest of the header and changes background to opacity */
    #navigation {
        background: rgba(29, 17, 10, 0.65);
        position: absolute;
        top: 0px;
        width: 100%;
    }
     
    /* makes the main content background transparent */
    #content .pageWidth {
        background-color: rgba(60, 41, 26, 0.51);
        position: inherit;
    }
     
    /* removes the outer content background */
    #content, .mainText {
        background: none;
    }
     
    /* moves shadows to under navigation bar instead of header */
    .top_left_shadow, .top_right_shadow {
        top: 39px;
    }
     
    /* Sets h1 color to white and adds shadow to make it visible against background */
    h1 {
        color: #FFF;
        text-shadow: 0 0 0 rgba(0, 0, 0, 0), -1px -1px 0 #000;
    }
     
    /* removes extra unneeded margin between navigation buttons */
    .navTabs .navTab {
        margin-right: 0px;
    }
     
    /* removes text from nav bar */
    .navLink {
        line-height: 0;
        font-size: 0;
        color: transparent;
    }
     
    /* adjusts the rest of the header to accommodate for moved nav bar */
    #logoBlock {
        padding-top: 39px;
    }
     
    /* makes footer links more visible */
    #footer a {
        color: #FFF;
    }
     
    /* removes unneeded space between copyright lines in footer */
    #skin_copyright {
        clear: none;
    }
     
    /* changes color of copyright text for visibility */
    #copyright, .portaCopy.copyright.muted, .portaCopy.copyright.muted a {
        color: #141414;
        font-weight: bold;
    }
     
    /* Removes "Quick Links" text from menus (specifically) */
    .Menu .menuHeader .muted {
        display: none;
    }
     
    /*============NEW CHANGES================*/
     
    /* adjusts post avatars to a constant 10px padding */
    .messageUserBlock div.avatarHolder {
        padding: 10px;
    }
     
    /* bolds usernames in shoutbox */
    #taigachat_box .username {
        font-weight: bold;
    }
     
    /* removes avatar from shoutbox */
    .taigachat_avatar {
        display: none;
    }
     
    /* removes date and time from shoutbox */
    .DateTime.muted {
        display: none;
    }
     
    /* removes margins around h3 section headers (except for bottom) */
    .sidebar .section .secondaryContent h3 {
        margin: 0px 0px 10px 0px;
    }
     
    /* Removes shoutbox header bottom margin */
    #taigachat_sidebar h3 {
        margin-bottom: 0px;
    }
    
    Preview for new changes
    Soartex CSS 2.png

    Working on getting it working for the other pages too, but chrome is being a bit uncooperative. ^^"
  7. DrumMaster4

    DrumMaster4 Texture Reviewer / Moderator Staff Member

    This might just be me, but I'm posting it here. I'm using the light version you posted (the only current one), and I have a few issues. Pictures show them, essentially.

    [​IMG]
    [​IMG] (I know the random comma has been there. It's just I don't remember the all-caps font being the font it is now)
    [​IMG] (Random purple thing!)
  8. GoldBattle

    GoldBattle Administrator Staff Member

    Soar, I am interested in the combination of both yours and disaster's themes. They are looking good. Once you both have a combination that is a more rounded product for the forum, the theme will be updated. Keep it up I'm loving it!

    I can say the main area with the shadow behind it is a good idea, the main point is to make this theme really have the ability to look good on every page. Keep it up!
  9. DrumMaster4

    DrumMaster4 Texture Reviewer / Moderator Staff Member

    Okay, this may just be me again, but I'm posting this here.

    On the forum selections page (Like "Off-Topic, Central Textures, Ports and Clones, etc), it says who most recently responded to a post, but it doesn't say the date and time. Same with each individual post, like here. Next to "Report", it's just blank, no date and time stamp.

    Is there a fix?
  10. Shoeboxam

    Shoeboxam Administrator/ Invictus Staff Member

    This forum theme is now the default theme. I should have made it default earlier, I was using it all this time without making it default. I only realized when I skimmed down the registration page... Sorry, and if there are any changes you still want to make feel free to post.
  11. Valsis

    Valsis Lead Fanver Developer Staff Member

    Just to say again that the white part of the website, the white background it's damn bright, is it possible to make it semitransparent like the menu bar?​
    Now all signatures are cutted out as well, for those who have them, like me.​

    See?​
    |​
    |​
    \/​
  12. DrumMaster4

    DrumMaster4 Texture Reviewer / Moderator Staff Member

    I like that it's default now, but Val's right - the signatures are split.

    Though I can see the date/timestamps now.
  13. Floppygunk

    Floppygunk Cereal Killer

    Somehow we should restrict the height of signatures, so they will have at most the same height they are now but not be cut off.
    Also, no animated GIFs in signatures (they really bug me).
  14. Valsis

    Valsis Lead Fanver Developer Staff Member

    It's just a unicorn running, not a fully signature blinking and sparkling and rolling and ... all that.
  15. Floppygunk

    Floppygunk Cereal Killer

    I suppose we can ask people to change their signature if it's too annoying...

    I've made a mockup of a new site skin/layout. What do you think?

    Mockup (open)
    [​IMG]
    Disaster86, Valsis and Shoeboxam like this.
  16. Tudoreleuu

    Tudoreleuu Well-Known Member

    Are you going to fix the dark theme? :p
    [​IMG]
    Edit: Oh, you've removed it. Remove the link, then? :p

    As for the cursor, it looks awesome, but it'd look even better with different states, like when you mouse over links.
  17. DrumMaster4

    DrumMaster4 Texture Reviewer / Moderator Staff Member

    @Floppy - Wow, I love that theme.
  18. Valsis

    Valsis Lead Fanver Developer Staff Member

    I love the fact that...IT HAS NO WHITE IN THE BACKGROUND!!!!

    I LOVE YOU<3
    Floppygunk and DrumMaster4 like this.
  19. DrumMaster4

    DrumMaster4 Texture Reviewer / Moderator Staff Member

    I know Shoe had mentioned that it should be less of the same color, so what if we add some color around the "Fanver [face] is better" part? It doesn't even have to be a block - it could be like the "Mojang" screen on Minecraft where it's an irregular shape.

    I'm thinking maybe wool for that, might do a mockup soon.
  20. Floppygunk

    Floppygunk Cereal Killer

    I don't know about having color around the logo, but I've taken Shoe's advice and added some colour and texture:

    Mockup (open)
    [​IMG]
  21. DrumMaster4

    DrumMaster4 Texture Reviewer / Moderator Staff Member

    That looks a lot better. I especially like the texture (that's from a wool alt, isn't it?) and the little splash of blue-texture as a border around the forum posts.
  22. Valsis

    Valsis Lead Fanver Developer Staff Member

    I don't like the blue, makes a huge contrast with the rest of the panel of colors.

    (designer mode kicking in now)
    In my perspective, either follow the themed colors or choose another neutral color. I loved your first mockup because all the colors flow with each other and it's soft on the eye, this one now has a huge impact with the high contrast between the background and the comments box.

    As for the wool pattern, my thoughts are: so fluffy :3
  23. DrumMaster4

    DrumMaster4 Texture Reviewer / Moderator Staff Member

    What if you did the color of brown wool except a little more muted? I have no idea what that would look like, but it would be more neutral.

    (Though I still like the blue)
  24. Floppygunk

    Floppygunk Cereal Killer

    Most people seem to like the blue background, so that will probably be the main skin. As an alternative, what do you think of this background?

    Mockup (open)
    [​IMG]
    GoldBattle likes this.
  25. Valsis

    Valsis Lead Fanver Developer Staff Member

    My little contribution, I hope you guys like it
    Background color options (open)


    GoldBattle and Floppygunk like this.
  26. Floppygunk

    Floppygunk Cereal Killer

    I see us having 2/3 versions of this skin: My blue one and two of Val's.

    Edit: Now I'm off my iPad, I like Val's 1st favourite one the best, and the 4th one would provide a good alternative colour.
    GoldBattle, DrumMaster4 and Valsis like this.
  27. Floppygunk

    Floppygunk Cereal Killer

Thread Status:
Not open for further replies.

Share This Page