position:absolute

[masterchief]

I was customizing my Flexile Dark theme the other day, adding embed code for my paypal button. After I tested it out and determined everything was functioning as expected, it was time to update my default style. Oooops.. the is no Right Content Area block in the default style. hmmm...

So I opened up PAGE_CONTAINER template in the default style. I found this line of code

<div id="headerMover">

I simply typed 'Paypal button goes here'... saved template and reloaded my webpage.
ooops.. dont want that as it did write the string in the header area, but it had a white background. So.. I looked at PAGE_CONTAINER template and found another line of code

<div id="headerProxy"></div>

I made these changes:

<div id="headerProxy">PayPal button goes here</div>

Sure enough that is exactly what I wanted... string was written upper left corner of header area. So all I need to do next was use a <div style="position:absolute"> with appropriate values for TOP and RIGHT. Here is final block of code:

        <div id="headerProxy">

        <!-- addon paypal button addon -->

        <div style="position: absolute; right: 50px; top: 20px;">
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_s-xclick">
            <input type="hidden" name="hosted_button_id" value="xxxxxxxxxxxxx">
            <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
           <img alt="" border="0" src="https://www.paypalobjects.com/WEBSCR-xxxxxxxxxxxxx/en_US/i/scr/pixel.gif" width="1" height="1">
        </form>
        </div>

        <!-- addon paypal button addon -->


        </div>

Using POSITION:ABSOLUTE you can literally position your objects wherever you want by changing the values for TOP and RIGHT. peace

 

[Paul B]

If you want to learn more about css then I would recommend http://www.w3schools.com/

 

[masterchief]

@brogan .. thanx for link. I must say that XenForo is the most flexible platform for customization. regards

I remember when I was asking you where to find EXTRA.CSS templates... lol
although I have come a long way since then, still have so much to absorb.

 

[dmnkhhn]

Just make sure you give <div id="headerProxy" /> a position: relative; just in case you want to position the PayPal button within that element.

Otherwise it will determine it's position by looking at the body which sometimes gives strange results.

 

[masterchief]

Just make sure you give <div id="headerProxy" /> a position: relative; just in case you want to position the PayPal button within that element.

Otherwise it will determine it's position by looking at the body which sometimes gives strange results.

that is exactly the very first line of code in the example that I provided. specifically, I manipulated this line of code in the template: <div id="headerProxy"></div>

and altered it thusly,

<div id="headerProxy">
<!-- addon paypal button -->
CODE GOES HERE
</div>

 

[EvilSeph]

If you want to learn more about css then I would recommend http://www.w3schools.com/

Hmm, you might want to take a look at this site: http://w3fools.com. Though w3schools has definitely improved, they're still not as good as they used to be

 

[Paul B]

That just reads like a sour grapes website to me.

 

[Erik]

Meh... one website isn't going to teach you everything anyways. Like anything, you should always get your information from multiple sources. W3Schools is great for beginners who would simply balk at a statement like, "well technically the browser doesn't add a newline character before and after the heading, it's just that it's default style sheets have non-zero margin-top and margin-bottom values for those elements."

It will sound like Greek to someone who is just learning HTML. All websites have their place.

 

[Paul B]

Agreed.

There's a large list of sites here: http://xenforo.com/community/threads/links-to-html5-css3.3782/

 

[Forsaken]

That just reads like a sour grapes website to me.

The W3C -has- asked for W3Schools to disavow that they're affiliated, and they have not done so.

Their credentials/certificates are no more than unicorn farts, and have as much basis in reality .

And yeah, it probably is a sour grapes website, but they have reason to do so, as they continue to do things that are negatively effecting people learn proper HTML/CSS.

 

[Paul B]

I've split the PayPal discussion off to here: http://xenforo.com/community/threads/adding-a-paypal-button.14231/