Left Alignment

[jbridges87]

@Mick - I haven't had a chance to test it yet. Would I be making the first change in the index .css and the second in the index.template.php?

[Mick.]

@Mick - I haven't had a chance to test it yet. Would I be making the first change in the index .css and the second in the index.template.php?

yes

[Antechinus]

@Antechinus - Can I just place that one line of code above and/or below the divclass within index.template.php?

Basically, yes. However, having read your earlier posts more carefully, things are a little more complicated.

Initially I only caught that you wanted the buttons "Right above the top category" and "to the right side". The code above does that but (if I'm not mistaken) I now realise you are wanting the whole kaboodle in one line. That requires untangling a pile of spaghetti to make it all behave.

Without messing with any of the default addthis.com or Bootstrap markup and classes (which may go bonkers if messed with) the easiest CSS solution I can think of looks like this:

Code Select Expand

/* Sets the two existing wrapper divs to half width, sitting side by side. */
/* The padding is just to make the content match the look of the board categories. */
.addthis_inline_share_toolbox, .addthis_tipjar_inline_8pfy {
float: left;
width: 50%;
padding: 8px 6px;
}
/* Necessary to remove the default clear: both; (which is set inline). */
/* Clear: both; would force a line break between the two divs, which you don't want. */
/* The !important is required because the inline style would take precedence otherwise. */
.addthis_inline_share_toolbox {
clear: none !important;
}
/* Aligns buttons and stuff to the right of this div. */
.addthis_tipjar_inline_8pfy {
text-align: right;
}
/* Buttons are set to float: left by default. */
/* That interferes with the text-align, so needs to be unset. */
.addthis_tipjar_inline_8pfy .at300b {
float: none;
}
/* Replaces the existing text, which was being a PITA with their spaghetti code. */
.addthis_toolbox::before {
position: relative;
top: -.5em;
display: inline-block;
margin: 0 .5em;
font-size: 18px;
color: rgb(102, 102, 102);
content: 'Want to donate?';
}
/* The existing donate text. Kill it with fire. */
/* I like doing things the easy way, and CBF'd trying to figure out WTF they were thinking. */
/* Call me lazy. :P */
.at-tjin-element .at-tjin-title {
display: none;
}
/* Drop the donate text on narrow screens, to keep things tidy. :) */
@media screen and (max-width: 32em) {
.addthis_toolbox::before {
  display: none;
}
}

I've commented the crap out of it, so it should be pretty clear.

You can put the code anywhere after the calls for the Bootstrap and addthis.com stylesheets. A link rel or inline stylesheet just before .addthis_inline_share_toolbox is fine if you prefer having it in that location. Just be aware that if you want all the CSS in the template you'll need to escape any apostrophes to prevent PHP parse errors. It'd probably be easier for you to call in an external stylesheet (ie: use a link rel).


If you want it minified:

Code Select Expand

.addthis_inline_share_toolbox,.addthis_tipjar_inline_8pfy{float:left;width:50%;padding:8px 6px}.addthis_inline_share_toolbox{clear:none!important}.addthis_tipjar_inline_8pfy{text-align:right}.addthis_tipjar_inline_8pfy .at300b{float:none}.addthis_toolbox::before{position:relative;top:-.5em;display:inline-block;margin:0 .5em;font-size:18px;color:#666;content:'Want to donate?'}.at-tjin-element .at-tjin-title{display:none}@media screen and (max-width:32em){.addthis_toolbox::before{display:none}}

[jbridges87]

@Mick - That worked for the main page view, but when I went into some other pages of the site, like statistics for example, the donate section actually overlapped and squished other content on the page. Thanks for the suggestion though.

Antechinus - Thanks for putting all that together, I honestly didn't expect the code changes to be so in depth given the seemingly simple task of moving something from the left side of the screen to the right side. I'm learning that coding is a very intricate process.

I'm going to leave it default for now, as I don't want to bork my site.
I may give this a try over the weekend though when I get some more time. In any case, if anyone else is looking, at least the code will be here.

[Antechinus]

Something occurred to me, so this is a bit cleaner. Just sorts the "Donate" text that was annoying me, without needing to hide it and replace it with a custom pseudo element. Like most things, it was obvious once I thought of it.

Advantages are that it saves a tiny bit of code, it will allow you to still edit the text in admin if you want to (I assume addthis allows editing the text in admin) and since it's not annoying me anymore there are no naughty words in the comments.

Code Select Expand

/* Sets the two existing wrapper divs to half width, sitting side by side. */
/* This is the easiest way of doing it with the existing .addthis.com markup. */
/* The padding is just to make the content match the look of the board categories. */
.addthis_inline_share_toolbox, .addthis_tipjar_inline_8pfy {
float: left;
width: 50%;
padding: 8px 6px;
}
/* Necessary to remove the default clear: both; (which is set inline). */
/* Clear: both; would force a line break between the two divs, which you don't want. */
.addthis_inline_share_toolbox {
clear: none !important;
}
/* Aligns buttons and stuff to the right of this div. */
.addthis_tipjar_inline_8pfy {
text-align: right;
}
/* Buttons are set to float: left by default. */
/* That interferes with the text-align, so needs to be unset. */
.addthis_tipjar_inline_8pfy .at300b {
float: none;
}
/* Tweaks the vertical positioning of the "Donate" text's wrapper, and allows it to sit in line with the buttons. */
.at-tjin-element .at-tjin-title {
position: relative;
top: -.7em;
display: inline-block;
margin: 0 .5em;
}
/* Allows the wrapper div for the buttons to sit in line with the "Donate" text. */
.at-tjin-element .at-tjin-title + .addthis_toolbox {
display: inline-block;
}
/* Drop the donate text on narrow screens, to keep things tidy. :) */
@media screen and (max-width: 32em) {
.at-tjin-element .at-tjin-title {
display: none;
}
}

That shouldn't bork anything. It's ok on all the pages I can see as a guest. If it does happen to cause a problem on any page, which is possible if you keep adding widgets that rely on the same generic classes for their markup, then it should be easy to work around that by making one or more of the declarations a bit more specific.

[jbridges87]

Would this code all be added to my reseller.css file, or do I need to make any kind of replacements?

[jbridges87]

@Antechinus - Well, I just grabbed all that code, without the comments [as amusing as they were lol], and added it to the end of my reseller.css file, and it seemed to work fine. Looks good.

Do I need to be concerned with the location of the code within the css file?

[Antechinus]

As long as it works, I wouldn't worry about the location too much.

[Mick.]

Get rid of "want to donate" by using P display: none;

[jbridges87]

@Mick - I can change the text through the admin panel of addthis.

@Antechinus - How can I remove all of the white space that shows underneath the share/donate buttons, and make the space the same as the top?

[Mick.]

@Mick - I can change the text through the admin panel of addthis.

@Antechinus - How can I remove all of the white space that shows underneath the share/donate buttons, and make the space the same as the top?

I didnt know that. Right on!

[Antechinus]

Remove the bottom padding and add a negative bottom margin on the wrapper divs. Adjust to suit:

Code Select Expand

  /* Sets the two existing wrapper divs to half width, sitting side by side. */
  /* This is the easiest way of doing it with the existing .addthis.com markup. */
  /* The padding is just to make the content match the look of the board categories. */
  .addthis_inline_share_toolbox, .addthis_tipjar_inline_8pfy {
    float: left;
    width: 50%;
    margin-bottom: -8px;
    padding: 8px 6px 0;
  }

And it may help to remove the bottom margin on the buttons:

Code Select Expand

  /* Buttons are set to float: left by default. */
  /* That interferes with the text-align, so needs to be unset. */
  .addthis_tipjar_inline_8pfy .at300b {
    margin: 0 5px 0 0 !important;
    float: none;
  }

That margin is set inline, so probably needs the !important to make it behave. I wish these buggers would learn to use CSS files.

[jbridges87]

That's excellent. Thank you so much, mate.
I appreciate it.

[drewactual]

wtf happened to the simplicity of float:right?

..... clown show.

[jbridges87]

I spoke too soon. Visually, everything looks as desired from the home page, but I just tried creating a new topic, and the message board wouldn't even load 

I attached a screenshot of how it loaded once clicking 'new topic'. Any ideas?
FYI - I reverted back to the default css file, and the message board loaded up as normal.

[Antechinus]

I'd need to see it in action to diagnose it. Can't tell anything from a screenshot.

[jbridges87]

Okay, I created a short video of the issue. Let me know if that clears it up.

I tried firefox, chrome and edge, as well as a second profile, just to be sure that wasn't the cause.

[Antechinus]

Doesn't really help. I would need to see what the document inspector is saying about what is happening.

[jbridges87]

Sorry, not familiar with that tool.
I have attached the file for your review. Let me know if you need me to do anything else.

[Antechinus]

Right click > Inspect element. Tells you what markup does what, and what CSS is affecting it.