Simple Machines Community Forum

As you know I've barely a clue about coding.  It seems a simple enough task: I don't want to use my Twitter button anymore because it dumps cookies on my visitor's computers that I can't suppress, so I want to replace it with a simple image that links to my Twitter profile.

Here you can see the Twitter button I want to replace, though it's positioned and working perfectly http://chalkcat.com/index.php

First I tried simply replacing the Twitter button code between the <div style="float: right; margin: 6px 22px 0 0;"></div> which I had created for my working Twitter button with basic html:


<div style="float: right; margin: 6px 22px 0 0;"><a href="https://twitter.com/ChalkCat"><img src="http://chalkcat.com/Themes/Actualism/images/Twitter.png" alt="Twitter" /></a>
</div>


This gave me the image in the right place but it wasn't clickable, so I did some googling and the problem appears to be that the image is being treated as a background image and therefore not clickable.  After some more googling, copying and pasting, I changed the code to this:

<div style="float: right; margin: 6px 22px 0 0;"><a class="twitter" title="twitter" href="https://twitter.com/#!/ChalkCat" style="float: right; margin: 6px 22px 0 0;background: transparent url(http://chalkcat.com/Themes/Actualism/images/Twitter.png) no-repeat top right;height:32px;width:32px;" target="_blank" rel="nofollow me">
</div>

but the result is the same, as you can see on my test site here http://parsleymonster.net/smf/index.php

Other than trying to be lazy with inline CSS rather than defining the class in index.css, I can't see what I'm doing wrong.  Please can one of you clever people show me the way?  :)

The first code works fine. My guess is the #toolbar in the css is acting up.

Just for giggles, let make something like this in the css? Add it above the #toolbar


#toolbar img a {
       cursor: pointer;
}


Thanks Mick, I've just done that and I've put that first lot of code back in index.template.php, but still no bananas  :(  I still have a pretty Twitter icon that I can't click on.  http://parsleymonster.net/smf/index.php

After some thought, thats not going to work :P  Let do this....


In the CSS file

.twitter-icon a {
      float: right;
      margin: 6px 22px 0 0;
      background: url (../images/Twitter.png) no-repeat;
}



In index.template.php
<div class="twitter-icon">
      <a href="https://twitter.com/ChalkCat" title="Follow Me"></a>
        </div>

Now the image has disappeared altogether  :P

Quote from: ChalkCat on June 16, 2013, 08:58:32 AM
Now the image has disappeared altogether  :P

lol,  it may be because i dont know where the image resides...


Let do this...


.twitter-icon a {
      float: right;
      margin: 6px 22px 0 0;
      background: url ("http://chalkcat.com/Themes/Actualism/images/Twitter.png") no-repeat;
}


Something weird is going on, no wonder I couldn't do this on my own  O:)  Still no sign of the image.  I am working with my test site at the moment which is parsleymonster.net/smf so I have to be careful I don't get muddled, but I have adjusted the image url to account for that and the image is at the place I'm pointing it to:

.twitter-icon a {
      float: right;
      margin: 6px 22px 0 0;
      background: url ("http://parsleymonster.net/smf/Themes/Actualism/images/Twitter.png") no-repeat;
}

Ok the image may be hidden behind the toolbar. Let's bring it up front with a z-index.

.twitter-icon a {
      float: right;
      margin: 6px 22px 0 0;
      background-image: url("http://parsleymonster.net/smf/Themes/Actualism/images/Twitter.png") no-repeat;
      z-index: 100;
}

Try this. I modified a bit.

.twitter-icon a {
      float: right;
      display: block;
      margin: 6px 22px 0 0;
      background-image: url("http://parsleymonster.net/smf/Themes/Actualism/images/Twitter.png") no-repeat;
      z-index: 1000;
}

Thanks for your patience.  I've added the display:block and even tried the z-index at 999, still no little image to be seen.  I've checked and double checked what I'm doing every step of the way because I'm the queen of stupid mistakes, but I don't seem to be doing anything wrong  :-\  I'm wondering whether I rammed the div in the wrong place to start with, but it's in exactly the same place where my Twitter button has been working all this time.  I don't know whether it helps to see my index.template.php....

I looked at the source of the forum and it seemed odd to see the twitter code "outside" of the #toolbar.

What if you move the
<div class="twitter-icon">
      <a href="https://twitter.com/ChalkCat" title="Follow Me"></a>
        </div>

Under the <div id="toolbar"> ?

Like this:

<div id="toolbar">

<div class="twitter-icon">
      <a href="https://twitter.com/ChalkCat" title="Follow Me"></a>
        </div>


Ok, just done that, sorry, no change....  :(

This should work now,.... it needed the image sizes  :P

.twitter-icon a {
      float: right;
      margin: 6px 22px 0 0;
      height: 32px;
      width: 32px;
      display: block;
      background: url("http://parsleymonster.net/smf/Themes/Actualism/images/Twitter.png") no-repeat;
      z-index: 999;
}

Yay, the image has returned!!!   :D

It still isn't clickable though  (https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fchalkcat.com%2FSmileys%2Ffantasticsmileys%2Fpeek2.gif&hash=4b01a8bc35e94260326d64f27349b80da1e42174)

Any reason why you have 2 #toolbars in your css?

#toolbar {
margin-top: 0;
padding: 0;
height: 40px;
background: #0a0a0a url(../images/art/navbg.png);
}

#toolbar {
margin-top: 0;
padding: 0;
height: 40px;
background: #0a0a0a url(../images/art/ACnavbg.png);
}

It works fine on my test page. I think theres something screwy with the meny bar.

http://idesign360.com/community/index.php/page,page2354.html

Quote from: Mick. on June 16, 2013, 10:05:03 AM
Any reason why you have 2 #toolbars in your css?

Code Select Expand

#toolbar {
margin-top: 0;
padding: 0;
height: 40px;
background: #0a0a0a url(../images/art/navbg.png);
}


Code Select Expand

#toolbar {
margin-top: 0;
padding: 0;
height: 40px;
background: #0a0a0a url(../images/art/ACnavbg.png);
}

I have no idea.  I've just downloaded the theme afresh to compare clean files and they're there as well.  It came with two  :-\

It is looking like there's something skewy with my menu, I knew it shouldn't be this difficult.

Leave it be then.


Quite frankly, im stumped.  :-[

Another way to test to see if the menu is the culprit is moving the icon above the menu. It will sit below the search bar.


add:
<div class="twitter-icon">
      <a href="https://twitter.com/ChalkCat" title="Follow Me"></a>
        </div>

Before:
<div id="logo">

The ACnavbg.png image does not exists. I think this may have been an error during design. Try removing this from index.css as it may be canceling out the other.

#toolbar {
margin-top: 0;
padding: 0;
height: 40px;
background: #0a0a0a url(../images/art/ACnavbg.png);
}

There is really no reason to have two mentions of "#toolbar"

I now see the icon is clickable.   Now we know the menu is the culprit. My guess you also use menu mods?

I just moved the code to above <div id="logo"> and um... I don't think it landed where you expected it to  ;)

I will try removing the duplicate instance of toolbar now...

Quote from: ChalkCat on June 16, 2013, 10:32:44 AM
I just moved the code to above <div id="logo"> and um... I don't think it landed where you expected it to  ;)

I will try removing the duplicate instance of toolbar now...

Right, but it was for testing purposes.

Quote from: Mick. on June 16, 2013, 10:32:27 AM
I now see the icon is clickable.   Now we know the menu is the culprit. My guess you also use menu mods?

It's clickable but it's picking up the destination from the site logo, not the Twitter link.  No, I have no menu mods, I have done everything menu-related manually in Subs.php.

Quote from: ChalkCat on June 16, 2013, 10:34:19 AM

Quote from: Mick. on June 16, 2013, 10:32:27 AM
I now see the icon is clickable.   Now we know the menu is the culprit. My guess you also use menu mods?

It's clickable but it's picking up the destination from the site logo, not the Twitter link.  No, I have no menu mods, I have done everything menu-related manually in Subs.php.

Its clickable if hovered to the far right. Anywho, thats not where we wanted. We moved it there for testing purposes.

Quote from: Mick. on June 16, 2013, 10:36:09 AM
Its clickable if hovered to the far right. Anywho, thats not where we wanted. We moved it there for testing purposes.

Gotcha and understood.  I've now removed it and also removed the duplicate #toolbar entry from the CSS as ARG suggested.  What can I try now?  :P  I've dropped a post too on the Actualism support thread with a link here in case Crip can shed any light on the matter.

This is the code in use... ;)   Maybe Crip can also update his theme.


.twitter-icon a {
      float: right;
      margin: 6px 22px 0 0;
      height: 32px;
      width: 32px;
      display: block;
      background: url("http://parsleymonster.net/smf/Themes/Actualism/images/Twitter.png") no-repeat;
      z-index: 999;
}



<div class="twitter-icon">
      <a href="https://twitter.com/ChalkCat" title="Follow Me"></a>
</div>


What does the menu do when :hovered ?

Go to: >index.template.php mnu section..>


<div id="topnav">
<ul>


Make like::


<ul id="topnav">';


Remove it's closing </ div>

Quote from: ARG on June 16, 2013, 10:28:49 AM
The ACnavbg.png image does not exists. I think this may have been an error during design. Try removing this from index.css as it may be canceling out the other.

Code Select Expand

#toolbar {
margin-top: 0;
padding: 0;
height: 40px;
background: #0a0a0a url(../images/art/ACnavbg.png);
}

There is really no reason to have two mentions of "#toolbar"

here it is bro'
http://chalkcat.com/Themes/Actualism/images/art/Acnavbg.png
---

Hi Crip, thanks for looking in   :)

I'm sorry, I'm not sure I fully understand.  I made the edit as I understand it so that I now have this:

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<ul id="topnav">';

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">
<a class="', $button['active_button'] ? 'active ' : '', '" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>', $button['title'], '</a>';

if (!empty($button['sub_buttons']))
{
echo '
<ul>';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li>
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</a>';

// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';

foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>', $grandchildbutton['title'], '</a>
</li>';

echo '
</ul>';
}

echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}

echo '
</ul>';
}

but now the background is broken as you can see here http://parsleymonster.net/smf/index.php

Not sure either what you mean "What does the menu do when :hovered ?"- it has always appeared to work just fine, you can see it before any of today's tampering on my live site http://chalkcat.com/index.php

.....if i was Admin i may can fix it...?

...or it may need updated ... i will check it?

Sure, sending you a PM  :)

Quote from: Crip on June 16, 2013, 12:09:27 PM

Quote from: ARG on June 16, 2013, 10:28:49 AM
The ACnavbg.png image does not exists. I think this may have been an error during design. Try removing this from index.css as it may be canceling out the other.

Code Select Expand

#toolbar {
margin-top: 0;
padding: 0;
height: 40px;
background: #0a0a0a url(../images/art/ACnavbg.png);
}

There is really no reason to have two mentions of "#toolbar"

here it is bro'
http://chalkcat.com/Themes/Actualism/images/art/Acnavbg.png
---

Sorry. I was getting an error stating that the image did not exist. In any case, one of the toolbar mentions should be renamed so there is not two "#toolbar" attributes.  ;)

true , leftovers ya know , but the menu_drop works fine with me? ;)

That twitter con could be placed anywhere actually.
     Like in-line with the linktree(); (a place holder) & float: right; ====> seems logical  ?

sorry, i've never messed with social icons .. so i'm of no help here looks like?

Quote from: ChalkCat on June 16, 2013, 12:21:59 PM
Sure, sending you a PM  :)

JUST UPDATED 2.0.4 VERSION ...    might help ya?

...

/me loves hackz

'twitter' => array(
'title' => '<div class="floatright"><img src="http://path.to/image.png" alt="" /></div>',
'href' => 'http://link.here',
'show' => true,
),

et voilla :P

Quote from: Yoshi on June 16, 2013, 03:52:59 PM
...

/me loves hackz

'twitter' => array(
'title' => '<div class="floatright"><img src="http://path.to/image.png" alt="" /></div>',
'href' => 'http://link.here',
'show' => true,
),

et voilla :P

OOOOOOOOooooooooo!!!!!!!  I like this Yo!

Lol. I don't see why you are all doodling around with HTML and CSS so much, while this even makes it work in other themes :P

Thanks Yoshi  :)  That's given me this http://parsleymonster.net/smf/index.php which is very close!  Can I get it any further to the right?

Thanks Crip too, my forum is so heavily modded that I will have to update the theme manually, so that's a job for another day in the week...

Quote from: ChalkCat on June 16, 2013, 04:59:46 PM
Thanks Yoshi  :)  That's given me this http://parsleymonster.net/smf/index.php which is very close!  Can I get it any further to the right?

Thanks Crip too, my forum is so heavily modded that I will have to update the theme manually, so that's a job for another day in the week...

Because its in the nav-bar and not the toolbar ;)

The toolbar is the placeholder for the navigation.

So where do I put it then?  Sorry, I'm only a wannabe hack and not a very good one  O:)

Okay, I have been gone all day and this is still going? That's it! In the next day or two I will post a detailed tut on how to add social icons/clickable images to any theme.  ;)

ChalkCat ,

I was looking at this: you could add that button/icon + most anywhere besides the Menu....?

   I'm talking Header?/Footer/Above Header with a single #twitter Div>> in the .css..at-leasettt it would wok ..?
• Only a suggestion friend. :)

Like::??:::
even above Search?

Yes, it is actually a bit easier to place optional images anywhere besides the toolbar. For some reason it takes more work to add them to the toolbar. Putting things in a wrapper also helps.

totally correct Mister ARG ;)  Lol..

i got it peeps via <span>  tags  </span>
......and it do CLICK
------------------------------------------ ;D

Oh wow, oh wow, oh wow!  That's what I want!  Thanks Crip  :D  Do those span tags replace the div tags I've been using until now?

i removed the <div s and just added <span>  </span>
---------- with FB ..
PM sent

Update:
via FB i removed the <li class="button_twitter"></li>
----
and put:;
<span><a href="http://Twitter.com/ChalkCat" class=""><div class="floatright"><img alt="" src="http://parsleymonster.net/smf/Themes/Actualism/images/Twitter.png"></div></a>
</span>


Quote from: ChalkCat on June 21, 2013, 02:32:08 PM
Oh wow, oh wow, oh wow!  That's what I want!  Thanks Crip  :D  Do those span tags replace the div tags I've been using until now?

Forget <span tags >
See:
http://www.jpr62.com/demos/index.php?theme=10

Quote from: ChalkCat on June 21, 2013, 02:32:08 PM
Oh wow, oh wow, oh wow!

Calm down dear it's only a forum.

:D

Quote from: Old Fossil on June 22, 2013, 05:04:21 PM

Quote from: ChalkCat on June 21, 2013, 02:32:08 PM
Oh wow, oh wow, oh wow!

Calm down dear it's only a forum.

:D

Sometimes excitement gets the best of us.  :D

Right, so copying from Crip's demo site best I can using Firebug, I now have this:

<div id="topnav">
<div id="link2"><ul><li><a class="twitter" target="_blank" title="Follow ChalkCat on Twitter" href="http://www.twitter.com/ChalkCat"></a></li></ul></div>
<ul>';

#link2 {
    float: right;
    padding: 5px 10px 0px;
}
a.twitter:hover {
      float: right;
      height: 32px;
      width: 32px;
      background: url("../images/Twitter.png") no-repeat scroll 0% 0% transparent;
}

but nothing is showing up.  I know it's because I'm thick but what have I done wrong???

Quote from: ChalkCat
but nothing is showing up.  I know it's because I'm thick but what have I done wrong???

No you didn't

Thanks French but that's the wrong site  ;)  I made do with shoving a button in the linktree on ChalkCat yesterday which is what you can see, but I'm still trying to put it in the navbar.  The site I'm working with is http://parsleymonster.net/smf - not showing there  :)

Ok, we have progress!!!   I changed it from a.twitter:hover { to a.twitter { and now it's showing and clickable - w00t!

Problem now is that when you roll the mouse over it it's been treated like a navbar button and highlights obscuring the twitter button.  Any ideas how I fix this?

<img alt=

???

(Pure guess) ;)

Quote from: K@ on June 23, 2013, 06:44:59 AM
<img alt=

???

(Pure guess) ;)

The alt parameter is for when the image could not be found, it displays the text in the alt. :)
If you're certain the image exists you can put alt="" in to comply with the XHTML standard.

But, in this case, it won't affect the displaying of the button.

Thanks K@ just tried it in the index.template.php but no bananas, though the image is specified in the css...  I don't know how to put it there though.  My css now looks like this:

/*Twitter button*/
#link2 {
    float: right;
    padding: 5px 10px 0px;
}
#link2 li a {
    display: inline-block;
    padding-right: 10px;
}
#link2 li {
    float: left;
    list-style: none outside none;
    padding: 0;
}
a.twitter {
      float: right;
      height: 32px;
      width: 32px;
      background: url("http://parsleymonster.net/smf/Themes/Actualism/images/Twitter.png") no-repeat scroll 0% 0% transparent;
}

Ah cheers Yoshi.  All I can see is that on Crip's site, hovering over the thing doesn't change the css it's using, but on mine it skips to the topnav hover stuff as soon as my mouse goes near it.  I don't know how much more beating from my head this table can stand...

Got there!!!!!!!  Huge thank you to Crip!!!  I needed to include both a.twitter and a.twitter:hover, and now it's perfect!  I just need to finalise my choice of button now  (https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fchalkcat.com%2FSmileys%2Ffantasticsmileys%2FWoot_Emoticon.gif&hash=bb7da92c95572a7c6cafb8c430cfa17f76887eb4)

I was close.

Cosmically speaking, anyway! :P

Well sorted, your royal Chalkiness! :)

..it looks really good.

 (https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fchalkcat.com%2FSmileys%2Ffantasticsmileys%2FThanx.gif&hash=d0c387dc94040edc67fae980008da78fd1462e6c)