CSS issues with Vanilla 2.0.18 default Theme

GideonLupine · January 2013

I am using the Voting Plugin with the Vanilla Default theme, and the CSS seems to be off. Even with all plugins off.

CSS ISSUE 1: The voting box is off the screen to the left on iPad, and it is outside the container to the left on PC. When my PC browser is not full screen the voting is cut off.

CSS ISSUE2: The check boxes on comments in a discussion are positioned where they would be in the discussion view.

I turned off all my plugins to check if something was jamming it, and it was still off.

I tried it in different themes and the issue remains.

I did not mod anything, so I am working from all default files. Is this only happening with my setup? I am keeping things pretty bland.

vrijvlinder · January 2013

This is a known issue with that plugin and every theme. You must edit the vote css file

GideonLupine · January 2013

Are there some example Voting CSS files around? I hate to reinvent the wheel.

I don't need anything special, just to work with the default Vanilla theme. If it does not work with the default theme, then what does it work with?

vrijvlinder · January 2013

If it does not work with the default theme, then what does it work with?

lol, I know but that is a problem with the css of that plugin, any plugin with it's own css might not work well for everyone. You must edit the vote plugin css file to work with this or any theme. There is no other way. You must edit to make it work for you.

422 · January 2013

copy the classes of the voting css file to your custom.css file.

Then add !important to each class / id. Then change the classes to suit, its quite easy

If you are using default theme, just add a custom.css file to design folder within that theme

GideonLupine · January 2013

I guess you are right, but it is the default factory Vanilla Theme.

Anything beyond the factory default, you should be expected tweak. That is cool. It can't be built to work with everything, but it should work with at least one thing.

I just expected an approved app to work with a factory fresh install. That way you have a working example to grow from.

I will figure it out and post a solution for default.

vrijvlinder · January 2013

@422 I tried using your approach and added the css to the custom, important etc... but for some reason it would not work, it has to be within the vote css. I think it has to do with it only calling the vote css and it ignores the custom part . It is the strangest thing that plugin lmao ....


 $Sender->AddCSSFile('voting.css', 'plugins/Voting');
        $Sender->AddJSFile('plugins/Voting/voting.js');
   }
    public function DiscussionsController_Render_Before($Sender) {
        $this->AddJsCss($Sender);
    }
   public function CategoriesController_Render_Before($Sender) {
      $this->AddJsCss($Sender);

422 · January 2013

In the default theme add: custom.css file to design folder.

Then add the voting css classes and shizznit to this custom.css file.

You should be able to override the voting.css ( whatever it is called ) by adding !important to class / id

I don't use voting plugin, as it is very buggy.

Just checked I added it to: http://vanillaskins.com/stackoverflow-forum/

GideonLupine · January 2013

@Todd said

If you want to completely change the css in the voting plugin I recommend you add a voting.css file to your theme's design folder. Vanilla will use your css file instead of the one in the plugin.

Would I not do that instead?

422 · January 2013

< isn't gonna argue with Todd. However, I would assume you would then have 2 voting.css files being loaded from 2 locations, and the latter would initiate the css classes, as more important because they are fetched last

422 · January 2013

@vrijvlinder said:
422 I tried using your approach and added the css to the custom, important etc... but for some reason it would not work, it has to be within the vote css. I think it has to do with it only calling the vote css and it ignores the custom part . It is the strangest thing that plugin lmao ....
 $Sender->AddCSSFile('voting.css', 'plugins/Voting');
      $Sender->AddJSFile('plugins/Voting/voting.js');
   }
  public function DiscussionsController_Render_Before($Sender) {
      $this->AddJsCss($Sender);
  }
   public function CategoriesController_Render_Before($Sender) {
      $this->AddJsCss($Sender);

Surely this method just renders it from its existing location

vrijvlinder · January 2013

Do whatever works for you. That is what we all do. Some things work some may not so you try something else.

I don't use voting plugin, as it is very buggy.

ditto, not to mention the admin can jimmy the votes lol

vrijvlinder · January 2013

Surely this method just renders it from its existing location

Maybe it should be like this

$Session = Gdn::Session();

        if (!C('Plugins.Voting.Enabled'))
            return;  {
            $Sender->ClearCssFiles();
            $Sender->AddCssFile('custom.css');
            $Sender->AddCssFile('style.css');
            $Sender->AddCssFile('voting.css', 'plugins/Voting', 'FALSE');
            $Sender->MasterView = 'default';

GideonLupine · January 2013

This fixed a check box issue on the discussion comments, but the vote box is still outside of the container and invisible to iPad.

div.AnswerTabs {
    border-bottom: 1px solid #999;
    background: none;
    padding: 0  0 0 8px;
}

div.AnswerTabs li a,
div.AnswerTabs li a:link,
div.AnswerTabs li a:hover,
div.AnswerTabs li a:active,
div.AnswerTabs li a:visited {
    display:inline-block;
    line-height: normal;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-bottom: none;

    -webkit-border-radius: none;
    -moz-border-radius: none;
    background: none;
    border: none;
}
div.AnswerTabs li.Active a {
    padding: 6px 10px 5px;
    position: relative;
    top: 1px;
    border: 1px solid #999;
    border-bottom: none;
    background: #fff;
}
div.HeadingTabs div.SubTab {
    font-size:16px;
}

.VotingSort .Active {
   font-weight: bold;
}
.StatBox {
   /* background: #004C9B; */
    padding: 5px 5px 0;
    float: right;
    height: 38px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.2;
}
.StatBox span {
    display: block;
    font-weight: normal;
    font-size:9px;
    line-height: 1;
    padding-bottom:2px;
    min-width:38px;
}
.StatBox,
.StatBox a {
    /* color: #99e2fe; */
    display: block;
}
.StatBox a {
    position: relative;
    z-index: 10;
}
/*
.StatBox a:hover {
    color: #fff;
    text-shadow: 0 0px 5px #fff;
}
*/
/*
.ViewsBox { background: #0065CE; }
.FollowsBox { background: #0053A9; }
*/
.AnswersBox {
    /* background: #0053A9; */
    margin-right: 4px;
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-bottomright: 2px;
}
/*
.HasAnswersBox { background: #013b76; }
.HasAnswersBox a { color: #fff; }
*/
.VotesBox {
    margin-left: 4px;
   border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-bottomleft: 2px;
}
ul.Discussions div.ItemContent a.Title {
    max-width: none;
}

ul.DataList li.Item {
    position: relative;
}
ul.Discussions .Options {
    float:none;
    width:auto;
    position: absolute;
    top: 2px;
    right: 215px;
}
ul.DataList div.Meta {
    z-index: 5;
}
div.Meta span.CommentCount {
    display: none;
}
ul.DataList div.Meta strong {
    box-shadow: 0px 0px 2px #777;
    -moz-box-shadow: 0px 0px 2px #777;
    -webkit-box-shadow: 0px 0px 2px #777;

    position:absolute;
    /*
    right: 668px;
    top: 6px;
    */
    top: 24px;
    left: 668px;
    white-space: nowrap;
}
ul.MessageList li.Item {
    background: #fff;
}
ul.MessageList div.Meta {
    position: relative;
}
ul.MessageList div.Meta span.Votes {
    text-align: center;
    display: block;
    position: absolute;
    right: 684px;
    line-height: normal;
    padding: 0;
}
span.Votes a,
span.Votes span {
    display: block;
}
ul.MessageList div.Meta span.Votes span {
    padding: 0;
    /* color: #000; */
    font-weight: bold;
    font-size: 18px;
    line-height: 1.2;   
}
.Voter span {
   font-size: 13px;
   font-weight: bold;
   padding: 0 3px;
}
/*
span.Votes span {
    padding: 0 4px !important;
    background: #0065CE;
    color: #99E2FE !important;
    min-width: 36px;
}
span.Votes a {
    color: #99E2FE;
    background: #004C9B;
}
span.Votes a.VoteUp {
    padding: 5px 4px 3px;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
   line-height: 100%;
}
span.Votes a.VoteDown {
    padding: 3px 4px 5px;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
   line-height: 100%;
}
span.Votes a:hover {
    background: #013B76;
    color: #fff;
    text-shadow: 0 0px 5px #fff;    
}
*/

/* Arrow Sprites */
span.Voter i.ArrowSprite i {
    display: none;
}
i.ArrowSprite {
    display: inline-block;
    height: 9px;
    width: 13px;
    background: url('arrow_sprite.png') top left no-repeat;
}
i.SpriteDown { background-position: bottom left; }
a:hover i.SpriteUp {    background-position: top right; }
a:hover i.SpriteDown {  background-position: bottom right; }

/* Comments */
ul.Discussions a.Bookmark { display: none; }
body.Discussion a.Bookmark {
    margin: 2px 6px 6px 8px;
}
ul.MessageList li.FirstComment {
    border-bottom: none;
}
div.AnswerTabs {
    margin-top: 12px;
    padding: 6px 8px 0;
    font-size: 11px;
    color: #aaa;
    text-align: right;
    position: relative;
    background: #f5f9ff;
}
div.AnswerTabs strong {
    position: absolute;
    left: 8px;
    color: #000;
    font-weight: bold;
    font-size: 16px;
    margin-right: 20px;
}
div.AnswerTabs ul {
    display: inline-block;
    margin: 0 10px;
}

vrijvlinder · January 2013

something is funny there with the float:right when it is totally to the left, try putting float:left or float none and adjust the margin and padding.

This may or may not work but you can try,

ul.MessageList div.Meta span.Votes { text-align: center; display: block; position: absolute; left: 90%; line-height: normal; padding: 0; }

GideonLupine · January 2013

Tried that nothing changed. Still wonky.

ul.MessageList div.Meta span.Votes {
    text-align: center; 
    display: block; 
    position: absolute; 
    left: 90%; 
    line-height: normal; 
    padding: 0;
}

vrijvlinder · January 2013

I would need a link to see what you got going there...my crystal ball has gone opaque...

GideonLupine · January 2013

I just nuked my changes. Restored the original CSS. Then I made the change you suggested.

ul.MessageList div.Meta span.Votes {
    text-align: center; 
    display: block; 
    position: absolute; 
    left: 90%; 
    line-height: normal; 
    padding: 0;
}

Now I got a change.

GideonLupine · January 2013

Voting box is now on the right and inside the container.

The comment Admincheck boxes are still out of place.

GideonLupine · January 2013

I am switching from "Vanilla" Template to the "Vanilla Default" Template, The problems are the same.

I am also disabling Voting because I am out of time. I will come back to it later.

422 · January 2013

It's a waste of time. Needs overhauling