Soft Responsive [Deleted]

I see. You got lost in styles stuff.

Don't worry, its all very simple. In styles structure I posted above, I suggested to add extra child style at the end for a reason. Reason is to keep all your customizations separate from main style. Whatever you change, do not change it in Soft Responsive and xenPorta styles, change it in last child style.

Unless instructed otherwise, keep your changes in template "extra.css".

Why should you keep changes in separate style?
  • When you'll be updating your style, if you have changed something in main style, those changes will be lost. Keeping changes in separate child style will make sure your changes won't be overwritten.
  • You can easily separate your changes from changes added by style.
Why should you add all code to extra.css instead of other templates?
  • Other templates might get updated later. If for example you customize navigation.css and navigation.css gets updated, your child style will not have updated code, which might result in errors.
  • I do not use extra.css in my styles, which means whenever you'll be updating style, extra.css in parent styles won't change. That file is included on every page, making it perfect for keeping custom style changes.
 
I've added it everywhere :/

yeesh. I had to do this:
.navTabs .navTab { margin-left: 10px; }

.recentNews .leftDate .newsDate
{
margin-left: -10px !important;
}

.recentNews .leftDate .newsText
{
margin-left: 35px !important;
}
 
I wanted to make the selected tab more distinct than the un-selected ones (e.g. the unselected tabs have dark color background while the selected is light color), but my photoshop skills not good enough to do that :(
 
Sorry for the noobish question, but I want to make sure I'm doing things right:

I currently use the Green/Orange version of this style, but would like to replace it with the default Blue/Red one. I have it installed as per Arty's suggestion:

Styles
Soft Responsive (Green)​
Soft Responsive (my customisations)​
I have the bottom-most style ("my customisations") set as the forum style, and I have made a few template changes within this style that I don't want to lose.

What is the best way to completely replace Soft Responsive (Green) with the default Soft Responsive style, whilst retaining my customisations? Do I just import the default Soft Responsive style, and tell it to overwrite Soft Responsive (Green)?

Thanks. :)
 
Yes, just import it over green style. It will override all templates from green style.
I wanted to make the selected tab more distinct than the un-selected ones (e.g. the unselected tabs have dark color background while the selected is light color), but my photoshop skills not good enough to do that :(
Do you want it to be closer to background color or even darker?
 
Try attached files. Replace images in styles/soft_responsive/xenforo/layout/
 

Attachments

  • navigation-tabs-left.webp
    navigation-tabs-left.webp
    442 bytes · Views: 14
  • navigation-tabs-right.webp
    navigation-tabs-right.webp
    798 bytes · Views: 15
This style is great, Arty - prior to installing it, I hated using my forum on my iPad, but now it is a joy to use! The support you offer is brilliant as well. :)

I have just started using XenKingDir Business Directory, and your style seems to have shifted the "Categories" sidebar from a vertical bar down the left, to a horizontal bar along the top:

http://xenforo.com/community/thread...directory-directory.27019/page-11#post-426710

I have asked for help in the thread of that Add-on, but I thought I would ask here as well, in case it is more relevant to your style than it is his add-on (if that makes sense)!

Thanks. :)
 
I want to set a maximum page width, as some of my users with very large monitors are saying it looks a bit daft stretched all the way across their screen. I have changed the 'Width' value under 'Page Width Controller' to 1000px - is that the best way to do it? Should I be adding/changing any other settings?

I would also like to add a background image (i.e. outside the main 1000px width container), that remains static as you scroll down the forum. I have a nice, textured tile image (256px square) which I would like to use for this, but I can't get it to show up. I have ticked the 'Surround content in frame' box under General > Settings, gone to General > Body and set the path of 'Background image' and selected 'Repeat' from the drop-down list, but it doesn't seem to have done anything.

What am I doing wrong? How do I get this 256px tile to show as a seamless background texture, preferably which remains static as you scroll down the forum?

Thanks. :)
 
Thank you.
How to make it so that it stays the blue background when selected?
You'll need to add these entries to extra.css:
Code:
    #navigation .navTabs .navTab.selected
    {
        background-position: 100% -90px;
    }
    #navigation .navTabs .navTab.selected .navLink
    {
        color: @activeColor;
        background-position: 0 -90px;
    }
    #navigation .navTabs .navTab.selected .navLink:after
    {
        border-top: 1px solid @primaryMedium;
        height: 1px;
        right: 0;
    }
 
Thank you.

You'll need to add these entries to extra.css:
Code:
    #navigation .navTabs .navTab.selected
    {
        background-position: 100% -90px;
    }
    #navigation .navTabs .navTab.selected .navLink
    {
        color: @activeColor;
        background-position: 0 -90px;
    }
    #navigation .navTabs .navTab.selected .navLink:after
    {
        border-top: 1px solid @primaryMedium;
        height: 1px;
        right: 0;
    }

Excellent, this is what I am looking for.

How to make the navigation bar also dark color?
 
You'll need to replace background images. Use images in attachment.

Also you'll need to change color of links. Add this to CSS:
Code:
#navigation .navTabs .navTab.selected .tabLinks a { color: @activeColor; background: transparent none !important; border-color: transparent !important; box-shadow: none !important; }
 

Attachments

  • navigation-tabs-left.webp
    navigation-tabs-left.webp
    462 bytes · Views: 12
  • navigation-tabs-right.webp
    navigation-tabs-right.webp
    892 bytes · Views: 11
Any comment on this, Arty?

http://xenforo.com/community/thread...directory-directory.27019/page-12#post-426754

Has any core CSS been changed? Or does it sound like I've tinkered with something and messed it up? :(

I'd also really appreciate knowing the above (how to set a tiled background image that remains static/doesn't scroll with the forum).

Many thanks.
Replace sfdirectory_index with attached file.

There is a minor bug in that add-on: contents of div.dirBlock are floating, but those floats aren't cleared properly. In attached file I've fixed it by adding <br clear="both" /> before </div>, but its an ugly fix. Correct fix would be adding this to css:
Code:
{xen:helper clearfix, '.dirBlock'}
 

Attachments

Also add this to css:
Code:
@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
{
    .dirBlock { float: none; width: 100% important!; }
}
 
Top Bottom