News:

Wondering if this will always be free?  See why free is better.

Main Menu

Left Alignment

Started by jbridges87, June 09, 2020, 01:11:45 PM

Previous topic - Next topic

jbridges87

Hey everyone, I have two divclass toolbars that I'm trying to align properly on my page.
One to the left and the other to the right.

The one to the left is working fine by default, but I can't seem to get the second divclass to shift all the way to the right of the page.
I did try the solution outlined, here, but that didn't seem to work.

I tried adding the tags above and below the divclass code from within index.template.php, but it didn't work. [I saved each time and tested both ways]
Programming is not my background though, so there's a good chance I may have just placed something wrong...

Any guidance is appreciated.
Come by and check out my sports forum, here.
Running SMF v2.0.17

Deaks

One of the most amazing things would be ability to see what you added in the css and the index.template.php files as we can give alot of help but alot of it will not help much.
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

jbridges87

I tried the code within the site I linked.

<div style="float: left;">Left Div</div>
and
<div style="float: right;">Right Div</div>
Come by and check out my sports forum, here.
Running SMF v2.0.17

Deaks

and where are you wanting these blocks to be?

More information the better :)
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

Mick.

Try this ?


<div class="something-right">
                            whatever goes here
</div>
<div class="something-left">
                            whatever goes here
                </div>


The css;

.something-right {
float: right;
}
.something-left {
float: left;
}

jbridges87

Right above the top category where the share buttons are. [site in sig]

I want to move on of them to the right side of the page.
Come by and check out my sports forum, here.
Running SMF v2.0.17

Deaks

I do not see the share buttons but you could use a mod like TP or SP and only use left and right blocks
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

Antechinus

Lol. Looks like Bootstrap spaghetti code, or something similar. The amount of markup for one bloody button is hilarious. :D

The basic problem you have is that the anchors are defined as inline-block, and are all sitting in the same parent div. This means they all line up from left to right.

So, exactly what result are you after? Are you trying to split the FB and Twitter buttons out to the right? Or are you trying to do something else?

Mick.

Quote from: Antechinus on June 09, 2020, 04:59:48 PM
Lol. Looks like Bootstrap spaghetti code, or something similar. The amount of markup for one bloody button is hilarious. :D

The basic problem you have is that the anchors are defined as inline-block, and are all sitting in the same parent div. This means they all line up from left to right.

So, exactly what result are you after? Are you trying to split the FB and Twitter buttons out to the right? Or are you trying to do something else?
I think he wants the two donated buttons to the right. My guess is since those are css served somewhere else he would have to use !important to force it.?

Antechinus

Should be able to just add a float: right; to those two buttons if that's what he's after. As long as no floats are defined elsewhere it should work without !important.

.at-svc-facebook {float: right;}

That works in Stylus.

Mick.

Quote from: Antechinus on June 09, 2020, 05:17:30 PM
Should be able to just add a float: right; to those two buttons if that's what he's after. As long as no floats are defined elsewhere it should work without !important.

.at-svc-facebook {float: right;}

That works in Stylus.
yup. See my earlier post

Antechinus

Yeah but you don't need extra divs or classes. It works if you just add a float to the existing class for that button. :)

The parent div is full width anyway, so any children floated right just whizz over to that side.

Mick.

Quote from: Antechinus on June 09, 2020, 05:21:09 PM
Yeah but you don't need extra divs or classes. It works if you just add a float to the existing class for that button. :)
that's the thing... I think that's a sharethis app? That's why I posted and figure it out from there

jbridges87

Yes, that's right.
I'm looking to keep the share buttons where they are [twitter, facebook, etc], but move the donations buttons to the right side.
Come by and check out my sports forum, here.
Running SMF v2.0.17

drewactual

add to the bottom of your main css:


.row .addthis_inline_share_toolbox{float:left;max-width:80%;padding:3em;}
.row .addthis_tipjar_inline_8pfy{float:right;border:1px solid #ccc; border-radius:.5em;margin:.5em;padding:1em;background:#eee;}


play with it until you find what you like. 

Antechinus

Why on earth would you need all of that? The buttons are already styled. All it should need is this:

.addthis_default_style .at300b {float: right;}

Seems to work perfectly when I tried it.

drewactual

Because instead of taking a tone of superiority and sneer I tried to help him amd dressed it up a touch too...

The arrogance on this board by many of its elders is just dumb...

Antechinus

My 2c is giving them the simplest code that will do what they want is helpful. If they want extra things, they'll ask for those too.

I'm not being arrogant. People ask because they don't know enough coding to get the result they want. If I give them all sorts of stuff they don't need, they won't know which bits do the things they want to do and which bits do something else entirely. OTOH, if I give them the simplest code which will do exactly what they want to do, then it will usually be obvious which bits are doing what, at least in the case of simple requests like this. This means they learn something, and learn it pretty easily.

jbridges87

#18
That reminds me of a Linux 101 class I took in College, where my Prof was explaining the workings of various commands, and we learned about the 'Less' command, and how it was superior to the 'more' command, in many ways.

10 years later, and I still remember the saying, 'Less is more'.

@Antechinus - Can I just place that one line of code above and/or below the divclass within index.template.php?
Come by and check out my sports forum, here.
Running SMF v2.0.17

Mick.

This didn't work?



.something-right {
float: right;
}
.something-left {
float: left;
}






<div class="something-right">
  <div class="addthis_tipjar_inline"></div>
</div>

<div class="something-left">
  <div class="addthis_inline_share_toolbox"></div>
</div>

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?
Come by and check out my sports forum, here.
Running SMF v2.0.17

Mick.

Quote from: jbridges87 on June 10, 2020, 04:26:46 PM
@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

Quote from: jbridges87 on June 10, 2020, 09:27:56 AM@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:

/* 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:

.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.
Come by and check out my sports forum, here.
Running SMF v2.0.17

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. :D

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.

/* 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?
Come by and check out my sports forum, here.
Running SMF v2.0.17

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?
Come by and check out my sports forum, here.
Running SMF v2.0.17

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?
Come by and check out my sports forum, here.
Running SMF v2.0.17

Mick.

Quote from: jbridges87 on June 12, 2020, 06:07:21 PM
@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:

  /* 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:

  /* 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. :P

jbridges87

That's excellent. Thank you so much, mate.
I appreciate it.
Come by and check out my sports forum, here.
Running SMF v2.0.17

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  :o

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.
Come by and check out my sports forum, here.
Running SMF v2.0.17

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.
Come by and check out my sports forum, here.
Running SMF v2.0.17

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.
Come by and check out my sports forum, here.
Running SMF v2.0.17

Antechinus

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

jbridges87

Sorry, should I be inspecting the element at the point the message board doesn't load?

It seems to me, that when the donate animation comes into screen, it is pushing the board out some how. I don't know what that means from a coding perspective, but if you notice the video, the board will load for a brief moment, but disappear as soon as the donate animation comes into the screen. It happens really fast, and is hard to see.

Come by and check out my sports forum, here.
Running SMF v2.0.17

Antechinus

Ok, played it through at a very slow frame rate. You're talking about the reply/new topic page going missing in action, yes? Not the board as such. I can see where it gets pushed out. There's a weird vertical striping background left where the form was.

I can't tell from the video what might be causing it. If you use the document inspector, look for form id="postmodify" and see if there is any CSS being applied to it over in the right panel. Highlighting it in the HTML should also tell you where it is (or would be) on the screen.

jbridges87

Yes, I'm referring to the reply page disappearing once the donate section is loaded.

You'll have to excuse my ignorance, but I'm not exactly familiar with what the document inspector is, unless you just mean the developer tools?
I tried to inspect the page for the form id, as you mentioned, but I don't see anything. It's likely I'm not doing something right, as I'm an amateur with this stuff.

I attached a video of where I was looking.
Is this the right area?
Come by and check out my sports forum, here.
Running SMF v2.0.17

Antechinus

It's inside div id="main_content_section".

jbridges87

I noticed the block section for the donate buttons are larger than the share.

I made a short clip below outlining what I mean. Notice the block size when I hover over the share vs the donate section.
Could this perhaps be the cause?

Come by and check out my sports forum, here.
Running SMF v2.0.17

Antechinus

It still doesn't tell me where your form id="postmodify" is hiding. :P If you want to find out, you have to look where I told you it is in the markup. ;)

jbridges87

Alright, I'm not sure exactly what happened, but it's working fine now. I tested in all browsers, and it's good.

The only change I made today was uninstalled the ad management mod, as it wasn't working properly for me.
There must have been some kind of file conflict going on.
Come by and check out my sports forum, here.
Running SMF v2.0.17

Antechinus

Ah. That does not surprise me. I've had trouble with that mod before. Good to know it's working now. I was surprised it wasn't, because the CSS alterations were so basic.

Like I mentioned earlier, if you keep adding widgets from addthis.com there may end up being a conflict due to re-use of generic classes. If that happens it should be fairly obvious, so just ask about it here and someone can arrange more specific targeting to get around the problem. :)

jbridges87

Sounds good.
Thanks again for all your help!
Come by and check out my sports forum, here.
Running SMF v2.0.17

Advertisement: