Go Back   vb.org Archive > vBulletin 4 Discussion > vB4 Design and Graphics Discussions

Reply
 
Thread Tools Display Modes
  #11  
Old 08-05-2014, 08:26 PM
409industries 409industries is offline
 
Join Date: Jan 2008
Posts: 63
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by tbworld View Post
Yeah, the CSS here can get a bit tricky. On top of that the selector names are inconsistent, some use "fb-" others use "fb_". Even if you do not use some of the selectors below keep them handy for the future. Alter the margins to your layout.
I modified the HTML structure just a bit with a container class ".fb_custom_container".

Code:
<style>
/* Add this to the bottom of your CSS file,
   It was just placed here for convience.

   1px = property placeholder so you can see the properties in a browser debugger.
         Their actual value is 0px;

    You will need to alter the following values to adapt to your layout.
*/

.toplinks ul.nouser #fb_loginbtn {
  margin-right: 1px;   /* 0px */
}
.toplinks ul.isuser #fb_loginbtn {
  margin-right: 5px; 
}
.toplinks ul.nouser .fb-like {
  margin-right: 12px; 
}
.toplinks ul.isuser .fb-like {
  margin-right: 1px;   /* 0px */ 
}
.toplinks ul.isuser #fb_link {
  margin-right: 12px; 
}
.toplinks div.fb_custom_container {
  float: left;
}
</style>

<li id="fb_headerbox" class="hidden">
    <div class="fb-like" data-href="http://facebook.com/myfacebookpage" data-send="false" data-layout="button_count" data-width="30" data-show-faces="false" data-font="verdana" data-colorscheme="dark">
    </div>
    <div class="fb_custom_container">
        <vb:if condition="$show['facebookuser']">
            <a id="fb_link" href="{vb:raw profileurl}">
                <img id="fb_squarepic" width="16" height="16" alt="{vb:rawphrase facebook_connect}" src="{vb:raw squarepicurl}" />
                <img id="fb_icon" width="14" height="14" alt="{vb:rawphrase facebook_connect}" src="{vb:stylevar imgdir_misc}/facebook.gif" />
            </a>
        <vb:else />
            <a id="fb_loginbtn" href="#"><img src="{vb:stylevar imgdir_misc}/facebook_login.gif" alt="{vb:rawphrase facebook_connect}" /></a>
        </vb:if>
    </div>
</li>
Can everything between the "style" tags go in the additional.css template? Thanks for posting all of that up, i'll be giving it a try!

--------------- Added [DATE]1407274350[/DATE] at [TIME]1407274350[/TIME] ---------------

Quote:
Originally Posted by Darkness95
Ok, i have found it with the link of your screenshots! But i can't see the connect button! :S
Indeed, only logged in users see the connect button (oh and don't bother using Internet Explorer it never shows it )

Use this test account if you want to take a look:

user: support3
pass: P@ssw0rd123!

Thanks a bunch for taking the time to check it all out! :up:
Reply With Quote
  #12  
Old 08-05-2014, 08:37 PM
tbworld tbworld is offline
 
Join Date: Oct 2008
Posts: 2,126
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by 409industries View Post
Can everything between the "style" tags go in the additional.css template? Thanks for posting all of that up, i'll be giving it a try!
-
Yes, I just posted it there for convenience for my own testing. I think I even posted a comment stating that you should move it to your CSS file, of course without the <style> tags.
Reply With Quote
  #13  
Old 08-06-2014, 12:11 PM
Darkness95's Avatar
Darkness95 Darkness95 is offline
 
Join Date: Sep 2010
Location: Italy
Posts: 10
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by 409industries View Post
Can everything between the "style" tags go in the additional.css template? Thanks for posting all of that up, i'll be giving it a try!

--------------- Added [DATE]1407274350[/DATE] at [TIME]1407274350[/TIME] ---------------



Indeed, only logged in users see the connect button (oh and don't bother using Internet Explorer it never shows it )

Use this test account if you want to take a look:

user: support3
pass: P@ssw0rd123!

Thanks a bunch for taking the time to check it all out! :up:
I can't login with this user! Anyway, i created a new user and i can't see the connect button:

http://dvdimagehosting.altervista.or...immagineee.png
Reply With Quote
  #14  
Old 08-07-2014, 08:33 PM
409industries 409industries is offline
 
Join Date: Jan 2008
Posts: 63
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Darkness95 View Post
I can't login with this user! Anyway, i created a new user and i can't see the connect button:

http://dvdimagehosting.altervista.or...immagineee.png
That is because that is the OP's forum

I was following up on this thread with my own question... forum is located here: http://www.dirtyimpreza.com/forums/
Reply With Quote
  #15  
Old 08-10-2014, 01:38 PM
Darkness95's Avatar
Darkness95 Darkness95 is offline
 
Join Date: Sep 2010
Location: Italy
Posts: 10
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by 409industries View Post
That is because that is the OP's forum

I was following up on this thread with my own question... forum is located here: http://www.dirtyimpreza.com/forums/
The like button is in another part of the theme compared to connect button! :S
Reply With Quote
  #16  
Old 12-17-2014, 02:52 PM
dimitrisvb's Avatar
dimitrisvb dimitrisvb is offline
 
Join Date: Oct 2008
Location: Greece
Posts: 41
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

getting back to this..

i've experimented and kind of did it..

i've edited the Navbar template, and placed two more elements (a facebook and a twitter button) :

Code:
<!-- προσθήκη για facebook like -->
<vb:if condition="THIS_SCRIPT == 'facebook like'">
<li class="selected"><iframe src="//www.facebook.com/plugins/......" allowTransparency="true"></iframe>
</li><vb:else />
<li><iframe src="//www.facebook.com/plugins/....." allowTransparency="true"></iframe></li>
</vb:if>
<!-- κλείνει η προσθήκη facebook like -->

<!-- προσθήκη για twitter follow -->
<vb:if condition="THIS_SCRIPT == 'twitter follow'">
<li class="selected"><a href="https://twitter.com/......" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @......</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li><vb:else />
<li><a href="https://twitter.com/......" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @......</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>
</vb:if>
<!-- κλείνει η προσθήκη twitter follow -->

just before the first <ul> closes...

It looks like this now:



Both buttons seem to work ok. But they are stuck to the top of the navbar.
Also, when the window is resized and there's not enough space, they get out of the bar and look messy:



I wonder:
a) is there a way to have them vertically align to the middle?
b) is there a way to have them placed on the right, just before the search box?
c) how can I have them fixed, so that they don't get out of the navbar when the windows gets smaller and there's not enough space?


thnx
Reply With Quote
  #17  
Old 12-17-2014, 05:29 PM
HM666's Avatar
HM666 HM666 is offline
 
Join Date: Jan 2014
Location: Little Rock, AR
Posts: 1,060
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by dimitrisvb View Post
getting back to this..

i've experimented and kind of did it..

i've edited the Navbar template, and placed this code:

Code:
<!--  facebook like button begin -->
<vb:if condition="THIS_SCRIPT == 'facebook like'">
<li class="selected"><iframe src="//www.facebook.com/plugins/like.php?href=https..........." scrolling="no" frameborder="0" align="middle" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>
</li><vb:else />
<li><iframe src="//www.facebook.com/plugins/like.php?href=https..........." scrolling="no" frameborder="0" align="middle" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe></li>
</vb:if>
<!--  facebook like button end -->
as the last element just before the first <ul> closes...

It looks like this now:



and it seems to work. But it's stuck to the top and I wonder:

How can I vertical align it? As you can see, I put align="middle" in the iframe tag, but nothing much happens.

Further, would it be possible to have it on the right, next to the search box?

thnx
You will need to add CSS to get it perfectly aligned where you want it. To move it to right next to the the search field you can try to use the css code float:right; To make it center and not be hugging the top you can either try padding-top:5px; (you can increase or decreased the pixels amount to fit it perfectly) or try margin-top:5px; (again you can adjust the number). You will need to probably make a new div tag for this and add it to your additional.css template.
Reply With Quote
  #18  
Old 12-17-2014, 06:08 PM
dimitrisvb's Avatar
dimitrisvb dimitrisvb is offline
 
Join Date: Oct 2008
Location: Greece
Posts: 41
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

i've played around with <div> tags, with no much success..

btw. i've updated the first post (sorry :/ )
Reply With Quote
  #19  
Old 12-17-2014, 09:38 PM
HM666's Avatar
HM666 HM666 is offline
 
Join Date: Jan 2014
Location: Little Rock, AR
Posts: 1,060
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by dimitrisvb View Post
i've played around with <div> tags, with no much success..

btw. i've updated the first post (sorry :/ )
Actually looking at your code from above you can add those CSS values into the code you provided in that last post you made before mine.
Reply With Quote
  #20  
Old 12-17-2014, 11:25 PM
ozzy47's Avatar
ozzy47 ozzy47 is offline
 
Join Date: Jul 2009
Location: USA
Posts: 10,929
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Link to the site, with the button enabled so guests can see it.
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 10:54 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04159 seconds
  • Memory Usage 2,289KB
  • Queries Executed 12 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (3)bbcode_code
  • (8)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (10)post_thanks_box
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (10)post_thanks_postbit_info
  • (10)postbit
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete