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

    Disaster86 Minecraft Modder

    Custom themes for Stylish. Check these out!
    Venom Light (open)
    [​IMG]
    Venom Dark (open)
    [​IMG]
    Requires Stylish plugin for Firefox and Chrome :)
    Light: Here
    Dark: Here

    More themes soon! :D
    Taking requests ;)
    Shoeboxam, Ben and DrumMaster4 like this.
  2. Disaster86

    Disaster86 Minecraft Modder

  3. Shoeboxam

    Shoeboxam Administrator/ Invictus Staff Member

    We need a better skin for the forum, and I like the look of this. My biggest complaint is that the text on the nav bar is transparent.
  4. Valsis

    Valsis Lead Fanver Developer Staff Member

    My only complain:
    the white background hurts my eyes really bad. :(
  5. Disaster86

    Disaster86 Minecraft Modder

    @shoe done!

    @val the pageContent and pageWidth blocks are used in the header and footer, if I try to edit the background image, I get this
    Yuck (open)
    [​IMG]
    ... looking into it ;)

    Edit: fixed the toolbar & drop-downs... with science :)
    [​IMG]
    Re-install for updates :p
  6. Disaster86

    Disaster86 Minecraft Modder

  7. Valsis

    Valsis Lead Fanver Developer Staff Member

    Lol, I would try to manage the white background if I would understand anything about coding, when I don't. I tried to copy the code to dreamweaver and manage it from there but it doesn't recognize the code for some reason. :(
  8. Disaster86

    Disaster86 Minecraft Modder

    It should do, I use Dreamweaver for CSS in college :)
    In fact, CSS should work with anything! (notepad, wordpad, frontpage etc).
    My code is very neat so you shouldn't have any problems deciphering it.
  9. Valsis

    Valsis Lead Fanver Developer Staff Member

    Yeah the thing is that when I try to have the preview on the right side of DW (the option you have to have the coded part on the left + preview on the right), it doesn't show up at all =\
  10. SoaringDragon

    SoaringDragon Well-Known Member

    *shudders*... don't even JOKE about using frontpage or wordpad to modify source code. It's horrendous and adds way too much bloat to your code. I won't even use Dreamweaver either because it's focused on distancing the designer from the code (BAD PRACTICE!). I recommend Notepad++ ALL THE WAY.

    Also Venom, you really shouldn't be "pinching" cursors like that without linking to or at least mentioning the original source. It's a nasty habit that could land you in a boatload of trouble... plus it's just generally rude... even if it's taken from imgur.
  11. Disaster86

    Disaster86 Minecraft Modder

    OH of course, its from Cursors-4U a free cursor website :)
    I would only rather use Dreamweaver because of its color picker tbh, but right now I am using Notepad++ for everything.
    The imgur pic above was just a preview, its a private image on my imgur, used for non-profit. I think I'm safe on this one.

    Edit: Source
  12. Valsis

    Valsis Lead Fanver Developer Staff Member

    And I use Dreamweaver to find the code I want to change and make my own background... however it doesn't show up for some reason... I don't even use Dreamweaver, only had it for college.
  13. Disaster86

    Disaster86 Minecraft Modder

    try adding !important; to the end of the background-image property, I find that helps :)

    e.g.
    Code:
    element    {
        background-image: url('image')!important;
    }
  14. SoaringDragon

    SoaringDragon Well-Known Member

    Venom,
    Well, the best thing about Notepad++ is that it's free and open-source. And guess what, Notepad++ has a color picker plugin too.

    Val,
    if you are just using it to search through code, Chrome has an excellent "Inspect Element" feature that highlights elements when you mouse over the code. Also, don't rely on DW's preview. If you want to see how it looks, open it up in your favorite browser because DW probably isn't going to render it accurately anyway since Chrome and Firefox update faster than any third-party could keep up with.

    Could you post a snippet of what you've changed? It's a bit easier to troubleshoot when we can see what you're doing. Also, as Venom showed above, make sure you change the attribute from "background-color:" to "background-image:" (or just simply use "background:"). I don't see why you should need the !important tag, but I generally don't deal with overriding existing site code... also, if you want to learn more about HTML and CSS, take a look at w3schools tutorials. :)
  15. Disaster86

    Disaster86 Minecraft Modder

    Ooooh plugin! thanks :)
    I needed to use !important for quite a few things to get it working, the header image and background most importantly :p
  16. GoldBattle

    GoldBattle Administrator Staff Member

    Very nice. I like it alot!

    *Cough cough* Soartex_v2....down.... bottom of page........left side......*cough*
  17. SoaringDragon

    SoaringDragon Well-Known Member

    Better take care of that cough there Gold. There's been a nasty cold going around... ;P
    GoldBattle likes this.
  18. Shoeboxam

    Shoeboxam Administrator/ Invictus Staff Member

    I have been playing around with it... I just noticed the section headers are white on light grey. Could you tweak that to be more visible?
  19. GoldBattle

    GoldBattle Administrator Staff Member

    Edited these to make it bearable on my eyes.
    Code:
    /*replaces subheadings from categories page*/
     
    .maintitle.categoryNodeInfo {
        background: #333333!important;
        opacity: 0.8!important;
    }
     
    /*replaces subheadings from forum categories*/
     
    .sectionHeaders {
        background: #333333!important;
        border: none!important;
        opacity: 0.8!important;
    }
  20. Disaster86

    Disaster86 Minecraft Modder

    I've already fixed all the headers... update soon >_< like when I get home :)
  21. Disaster86

    Disaster86 Minecraft Modder

    Okay *phew!* Update:
    • Removed Dark Venom (hated it)
    • Fixed white on grey subheadings
    • Added backgrounds for all (I think) sidebar headings
    • Added a secondary theme to shrink the toolbar to page width
    • Fixed calender icons
    • Added shadows to more elements
    • Shrunk news avatars to fit the centered layout
    • Added some stuff to the downloads page
    • And quite a bit more...
    If there's anything else I need to cover, please inform me or help out yourself :p
    Feel free to use my work on the site if you like it :)
  22. Valsis

    Valsis Lead Fanver Developer Staff Member

    Disaster, keep the shading in all the boxes, I really liked that :(
    Also, any possibility of making the white background another color? light gray or light brown to match the main background.
  23. Valsis

    Valsis Lead Fanver Developer Staff Member

    Here are some minimal changes I made in the code itself :3 I kind of like it!!
    Show Spoiler
    little change.png
  24. Disaster86

    Disaster86 Minecraft Modder

    Ooooh... can I see the CSS?
  25. Valsis

    Valsis Lead Fanver Developer Staff Member

    I dont know how to show you... I edited on chrome by using the inspect element option :\
    I was also looking for your skype cause I don't know where it is so I could show you :(

    This is the best I can provide you:
  26. SoaringDragon

    SoaringDragon Well-Known Member

    ...that doesn't make any sense. You shouldn't be able to make persistent changes directly through inspect element.... o_O Although really, we shouldn't have to go through a third-party CSS overrider to change how the forums look. We own the site, we should be able to add improvements and alternate themes. Who is the web master?

    However, from what I gather...

    Code:
    #moderatorBar {
      background-color: rbga(39, 24, 13, 0.92);
    }
     
    #content .pageWidth {
      background-color: rgba(60, 41, 26, 0.51);
    }
     
    #navigation {
      background-color: rgba(29, 17, 10, 0.65);
    }
    
    Pretty much that's all you changed, and this is all Venom would have needed so that he could simply copy and paste the code in addition to the code he's already changed. Although... he should also keep in mind that the rgba method may not work for all browsers (which is why there's usually a whole bunch of different attributes used when transparency is applied). Also those would probably have to have the !important value to make sure they override.
  27. Shoeboxam

    Shoeboxam Administrator/ Invictus Staff Member

    I am the webmaster, but I'm not nearly knowledgeable enough. I have to thank Rashed, GoldBattle and RedX for doing far and away the bulk of the work on the site.

    I know Xenforo pulls styles from the styles folder and I know there's this pretty interface in the admin panel for editing and adding styles. You can see I messed around with this a while back in the Shoe themes. Past that, I'm not sure how CSS interacts with styles or how to make changes. That's next on my todo list, I have some reading and studying to do before I understand it all.
  28. GoldBattle

    GoldBattle Administrator Staff Member

    I'll talk to shoe later, but it might be persistent to some that have changed themes. I uploaded a modified version of Disaster86 theme to soartex_v2, just so that it could be seen in true form. I do like it.
  29. Disaster86

    Disaster86 Minecraft Modder

    Thanks... but please update to the latest version :)
    Edit: I'm written as Disaster89... Its 86 :p but Disaster or Venom is fine too :)
  30. SoaringDragon

    SoaringDragon Well-Known Member

    Hmm... didn't know those themes were there. Anyway, I like the fluid theme, but I hate the nav bar (not the background, the links), especially when I try to move my browser window to half-width so I can do some multi-tasking. Even with the version 2, the padding and margins between links is too big and I'd rather see the text removed altogether. The icons are good enough to where you know intuitively what they are... and if people really need text, turn it into hover text.

    There's a way to remove the text with styles, but I think it'd be much better if it was changed throughout the site.
Thread Status:
Not open for further replies.

Share This Page