Soft Responsive [Deleted]

Download old style, download new style. Compare them using tool like FileMerge (part of XCode package) or WinMerge, apply changes to your forum.

You should never apply edits to style. Create a child style, apply edits to it instead. Then when you'll be updating your changes won't be lost.
 
Rambro said:
Arty - is there any way to update the style without having it wipe out your template edits? The last SR update overwrote every adjustment that I had done.
Click to expand...
TMS is a good tool to help you from losing all your edits.

But you're still going to need to update your image path and logo .... That's just how xenforo works.
 
Arty said:
Download old style, download new style. Compare them using tool like FileMerge (part of XCode package) or WinMerge, apply changes to your forum.

You should never apply edits to style. Create a child style, apply edits to it instead. Then when you'll be updating your changes won't be lost.
Click to expand...

Well, the colors are all children of the main, right? But they all need to be updated as well. So, create children of children? I'm going to need to go on welfare soon for all of these kids!

Adam Howard said:
TMS is a good tool to help you from losing all your edits.

But you're still going to need to update your image path and logo .... That's just how xenforo works.
Click to expand...

Well that's no big deal. How can you use TMS to edit a template so that you can just go back and re-apply it whenever you want? I must have missed that in the TMS guide.
 
Hi, I again need help. Just now noticed that Shoutbox and Recent News addon are misaligned in Responsive style where as working fine in other styles.

In Responsive Style :

XZopcCB.png



In Other Styles :

aftaSKh.png
 
Rambro said:
Well, the colors are all children of the main, right? But they all need to be updated as well. So, create children of children? I'm going to need to go on welfare soon for all of these kids!
Click to expand...
No, only coffee color scheme is a child style of main style. Other color schemes do not require parent style.

Shree said:
Hi, I again need help. Just now noticed that Shoutbox and Recent News addon are misaligned in Responsive style where as working fine in other styles.
Click to expand...
What add-ons are you using for it?
 
Hi Arty

I have settled on your theme as the choice for my forum and am now trying to customise it a little. The 3 areas I am looking at changing are the header background, the tabs and the moderator bar color. So far I have updated the header background with the CSS3 gradient colours of the Flexile style (I was going to use that) as per Anthony Parsons thread here http://xenforo.com/community/resources/css3-gradient-correct-application.633/ and now want to make the tabs that mimic the Flexile tabs. That is where I got lost.

I did try the things offered earlier in the thread without success so am looking for some pointers as to how to make it work. The site so far can be seen at xf.australianspeedway.com which is my development site. It works fine on my Galaxy S2 browser, just the PC version is not working. Oh, and I am still working my way through adverts but that is for down the road.

{EDIT}
Forgot to add: I am also looking at making the node headers and sidebar headers the same blue as the footer. Any advice on that one too?

Any assistance you can give would be greatly appreciated.

Also, I have XF Arcade installed and that goes haywire on the mobile. Is there a trick to stopping that tab appearing when in mobile mode?

Cheers
Bruce
 
About those CSS3 gradients: that article you linked to is outdated. Instead of
Code: 
background: @primaryMedium url('@imagePath/xenforo/gradients/main-bar-gradient.png') repeat-x top;
 
background: @primaryMedium -moz-linear-gradient(top,  rgba(255,255,255,0.2) 0%, rgba(226,226,226,0.15) 30%, rgba(173,173,173,0.02) 85%, rgba(158,158,158,0) 100%); /* FF3.6+ */
background: @primaryMedium -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(30%,rgba(226,226,226,0.15)), color-stop(85%,rgba(173,173,173,0.02)), color-stop(100%,rgba(158,158,158,0))); /* Chrome,Safari4+ */
background: @primaryMedium -webkit-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(226,226,226,0.15) 30%,rgba(173,173,173,0.02) 85%,rgba(158,158,158,0) 100%); /* Chrome10+,Safari5.1+ */
background: @primaryMedium -o-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(226,226,226,0.15) 30%,rgba(173,173,173,0.02) 85%,rgba(158,158,158,0) 100%); /* Opera 11.10+ */
background: @primaryMedium -ms-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(226,226,226,0.15) 30%,rgba(173,173,173,0.02) 85%,rgba(158,158,158,0) 100%); /* IE10+ */
background: @primaryMedium linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(226,226,226,0.15) 30%,rgba(173,173,173,0.02) 85%,rgba(158,158,158,0) 100%); /* W3C */
filter: @primaryMedium progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#009e9e9e',GradientType=0 ); /* IE6-9 */
correct code would be
Code: 
background: @primaryMedium url('@imagePath/xenforo/gradients/main-bar-gradient.png') repeat-x top;
 
background-image: -webkit-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(226,226,226,0.15) 30%,rgba(173,173,173,0.02) 85%,rgba(158,158,158,0) 100%); /* Old Chrome and Safari */
background-image: linear-gradient(to bottom,  rgba(255,255,255,0.2) 0%,rgba(226,226,226,0.15) 30%,rgba(173,173,173,0.02) 85%,rgba(158,158,158,0) 100%); /* All modern browsers */
filter: @primaryMedium progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#009e9e9e',GradientType=0 ); /* IE6-9 */
-ms-linear-gradient does not exist. IE9 doesn't support gradients, but supports filter. IE10 supports unprefixed version
-moz-linear-gradient is no longer needed
-webkit-gradient is also no longer needed because even older versions of webkit support -webkit-linear-gradient
-o-linear-gradient is not needed because Opera supports unprefixed version
linear-gradient's first parameter should be target, not source. so its "to bottom" instead of "top"

Instead of copying whole background property, background-image is enough.

Also, as of XenForo 1.1.4 you can safely put that in style property's extra field. It won't mess up syntax.

@Anthony Parsons: please update that article :)
 
Thanks Arty, changed the CSS3 defs to your settings and added a specific palette item to make it the same as Flexile.

I have been trying to add blue category and side block header strips without luck, will try again tomorrow. Next up is the tab replacement, wish me luck :)

Thanks too for looking into XF Arcade.

Cheers
 
Replace arcade.css with this
Code: 
/** column style and width **/
.gameList .sectionHeaders,
.gameListItem {
display: table;
table-layout: fixed;
width: 100%;
word-wrap: normal;
}
.gameList .sectionHeaders dt,
.gameList .sectionHeaders dd,
.gameListItem .listBlock {
  display: table-cell;
  vertical-align: middle;
}
  .gameList .image {
  width: 48px;
  }
 
  .gameList .theTitle {
  width: auto;
  }
 
  .gameList .champion {
  width: 200px;
  text-align: center;
  }
  .champion .avatarContainer {
    float: left;
    margin-left: 5px;
    margin-top: 5px;
  }
  .champion .infoContainer {
  }
 
  .gameList .personalBest {
  width: 149px;
                        text-align: center;
  }
 
/* column headers */
.gameList .sectionHeaders {
{xen:property subHeading}
{xen:property DiscussionListHeaders}
padding: 0;
}
 
.gameList .sectionHeaders span {
  padding: 4px 9px;
  border: transparent 1px solid;
  display: block;
  position: relative;
}
 
.gameList .sectionHeaders span:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: transparent 1px solid;
  pointer-events: none;
}
 
/** IE <8 **/
.gameList .sectionHeaders,
.gameListItem                { *display: block; _vertical-align: bottom; }
.gameList .sectionHeaders dt,
.gameList .sectionHeaders dd,
.gameListItem .listBlock    { *display: block; *float: left; }
.gameListItem .listBlock    { _height: 52px; *min-height: 52px; } /* todo: should be calculation */
.gameList .image            { *width: 5.98%; }
.gameListItem .image        { *font-size: 0; }
.gameList .theTitle          { *width: 59.98%; }
.gameList .champion          { *width: 14.97%; }
.gameList .personalBest      { *width: 14.97%; }
.gameList .sectionHeaders dt,
.gameList .sectionHeaders dd { *padding: 5px 0; }
.gameList .sectionHeaders a,
.gameList .sectionHeaders a span { *display: inline !important; *float: none !important; }
/** main **/
.gameListItem {
border-top: 1px solid @innerTopBorder;
border-bottom: 1px solid @innerBottomBorder;
}
/* sections, section widths */
 
.gameListItem .image, 
.gameListItem .champion {
}
 
.gameListItem .title,
.gameListItem .personalBest {
}
 
/* title, poster section */
 
.gameListItem .titleText {
  padding: 5px;
  overflow: hidden; zoom: 1;
}
 
  /* first row */
 
  /* second row */
  .gameListItem .secondRow {
  font-size: 11px;
  /*clear: both;*/
  margin-top: 5px;
  }
 
  .gameListItem .secondRow .controls {
    float: right;
    padding-left: 20px;
  }
   
    .gameListItem.AjaxProgress .controls {
    background: transparent url('@imagePath/xenforo/widgets/ajaxload.info_B4B4DC_facebook.gif') no-repeat left center;
    }
/** bottom summary **/
 
.gameList .sectionFooter {
overflow: hidden; zoom: 1;
}
.gameList .sectionFooter .contentSummary {
  float: left;
  display: block;
}
 
/* home */
#arcadeHome {
{xen:property css3ClearBlock}
}
#arcadeHome #GameCategories
{
{xen:property css3FullBlock}
padding: 3px 7px;
}
#arcadeHome .tabs
{
padding-left: 10px;
}
 
/* GameVote */
a.GameVoteLink.GameVoted {
font-weight: bold;
}
/* dark mods */
.gameListItem .image { line-height: 0; }
.gameListItem .image, .gameListItem .champion { padding: 5px 0; }
.gameListItem .title { font-size: 20px; }
.scores { padding: 5px 0; text-align: center; }
.gameStats { padding: 5px 0; text-align: center; }
.gameListItem .personalBest { }
.highscores { list-style: decimal; font-size: 11px; margin: 5px auto; padding: 5px 0; }
.highscores td:first-child { color: #aaa; }
.highscores .name { width: 100px; text-align: right; padding-right: 7px; overflow: hidden; }
.highscores .datscore { text-align: left; }
.gameListItem .secondRow { color: #999; }
.gameList .theTitle { padding-left: 5px; }
@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
{
.gameList .sectionHeaders,
.gameListItem .gameStats,
.gameListItem .champion,
.gameListItem .scores,
.gameListItem .personalBest
{
  display: none;
}
}
 
No idea. I know of one Arabic forum that uses it, but maybe owner made some adjustments to code.
 
You must log in or register to reply here.

Similar threads

AndyB
Ad manager responsive [Deleted]
Replies
9
Views
726
AndyB
AndyB
CyberAP
Making your logo responsive [Deleted]
Replies
10
Views
1K
CyberAP
CyberAP
Top Bottom