Changing the 'Create Thread' Button to an Image- RESOLVED

[bubblegum]

On this forum, the 'create thread' button is green.  On mine, it is just black. i am looking to make it an actual button with an image.

i did find a post how this is supposed to be done here  (i think this is what i was wanting)

However, when i followed the steps, the 'create thread' option disappeared completely.

Original:

{if $[create_thread_button]}

Changed to:

{if <a href="$[create_thread_button.href]">$[theme.image.http://storage2.proboards.com/7255414/images/jOkPyGvEVNXGrbjzzoDi.png]</a>

Which part am i screwing up please?

[Lynx]

Jan 20, 2022 12:16:01 GMT -8 bubblegum said:

On this forum, the 'create thread' button is green.  On mine, it is just black. i am looking to make it an actual button with an image.

i did find a post how this is supposed to be done here  (i think this is what i was wanting)

However, when i followed the steps, the 'create thread' option disappeared completely.

Original:

{if $[create_thread_button]}

Changed to:

{if <a href="$[create_thread_button.href]">$[theme.image.http://storage2.proboards.com/7255414/images/jOkPyGvEVNXGrbjzzoDi.png]</a>

Which part am i screwing up please?

You still need the {if $[create_thread_button]} as this tests for the presence of the button in the first place. I don't have time to look tonight, but I'll take a look in the next day or 2 at the template to see if I can give you a full code answer - unless someone gets back to you first. I'm not at home right now, and have very little free time, but I'll be back home on Saturday and I'll be able to have time then to take a closer look.

[Chris]

Jan 20, 2022 12:16:01 GMT -8 bubblegum said:

On this forum, the 'create thread' button is green.  On mine, it is just black. i am looking to make it an actual button with an image.

i did find a post how this is supposed to be done here  (i think this is what i was wanting)

However, when i followed the steps, the 'create thread' option disappeared completely.

Original:

{if $[create_thread_button]}

Changed to:

{if <a href="$[create_thread_button.href]">$[theme.image.http://storage2.proboards.com/7255414/images/jOkPyGvEVNXGrbjzzoDi.png]</a>

Which part am i screwing up please?

1. 
   The variables inside the {if}{/if} conditionals (which are denoted in red below) are what need to be changed, the variables being tested by the conditionals themselves need to remain unmodified in order for the conditional to properly work.
   
   
   
   {if $[create_thread_button]}
   <ul class="controls"><li>$[create_thread_button]</li></ul>
   {/if}
   
   
   
   
   
   {if $[reply_button]}
   <ul class="controls"><li>$[reply_button]</li></ul>
   {/if}
   
   
   
   The conditionals are there in case the ability to create or reply is not available to the user so those buttons do not get displayed
   

   
   

   reasons:

   • in a board where guests cannot post
   • on a thread located within a board where members can only create threads but not reply to threads
   • etc...

   
   

   
   
2. 
   The thread referenced in your post also assumes you've uploaded images to the custom images section of your theme
   
   
   SPOILER: Click to show
   
   
   
   which is why that referenced thread is giving you a variable such as $[theme.image.your_image] to access the HTML coding of the image you've uploaded to the custom area of your theme. If you did not upload or link an image and instead chose to use an image hosted elsewhere then you need to create the HTML for the image yourself:
   
   <a href="$[create_thread_button.href]"><img src="//storage2.proboards.com/7255414/images/jOkPyGvEVNXGrbjzzoDi.png" alt=" "></a>
   
   
   

[bubblegum]

Jan 20, 2022 15:29:51 GMT -8 Chris said:

Jan 20, 2022 12:16:01 GMT -8 bubblegum said:

On this forum, the 'create thread' button is green.  On mine, it is just black. i am looking to make it an actual button with an image.

i did find a post how this is supposed to be done here  (i think this is what i was wanting)

However, when i followed the steps, the 'create thread' option disappeared completely.

Original:

{if $[create_thread_button]}

Changed to:

{if <a href="$[create_thread_button.href]">$[theme.image.http://storage2.proboards.com/7255414/images/jOkPyGvEVNXGrbjzzoDi.png]</a>

Which part am i screwing up please?

1. 
   The variables inside the {if}{/if} conditionals (which are denoted in red below) are what need to be changed, the variables being tested by the conditionals themselves need to remain unmodified in order for the conditional to properly work.
   
   
   
   {if $[create_thread_button]}
   <ul class="controls"><li>$[create_thread_button]</li></ul>
   {/if}
   
   
   
   
   {if $[reply_button]}
   <ul class="controls"><li>$[reply_button]</li></ul>
   {/if}
   
   
   
   The conditionals are there in case the ability to create or reply is not available to the user so those buttons do not get displayed
   

   
   

   reasons:

   • in a board where guests cannot post
   • on a thread located within a board where members can only create threads but not reply to threads
   • etc...

   
   

   
   
2. 
   The thread referenced in your post also assumes you've uploaded images to the custom images section of your theme
   
   
   SPOILER: Click to show
   
   
   
   which is why that referenced thread is giving you a variable such as $[theme.image.your_image] to access the HTML coding of the image you've uploaded to the custom area of your theme. If you did not upload or link an image and instead chose to use an image hosted elsewhere then you need to create the HTML for the image yourself:
   
   <a href="$[create_thread_button.href]"><img src="//storage2.proboards.com/7255414/images/jOkPyGvEVNXGrbjzzoDi.png" alt=" "></a>
   
   
   

Thank you MSG.

Thank you Chris for giving such a detailed explanation.  i won't lie though, i was pretty near utterly lost trying to understand all you said. i'm sure a fellow coder would have understood, but i am not one of those at all.

i posted :

<a href="$[create_thread_button.href]"><img src="//storage2.proboards.com/7255414/images/jOkPyGvEVNXGrbjzzoDi.png" alt=" "></a>

in place of :

{if $[create_thread_button]}

And ended up with two buttons.  The new button way over where i don't want it on the left, and the original still over on the right.  i must have screwed up, obviously somewhere.... no idea where.

[Chris]

I made the part you are supposed to edit red to remove any confusion...

EDIT: nevermind, we'll wait for msg to help you

[Kami]

i can also help tomorrow afternoon if MSG runs into any blockers (:

[Kami]

Woke up a bit early so gonna go ahead and tackle this. (Lynx for vis! xo)

So, to break down the steps that Chris wrote:

Once you're on the "Board" template in the "Board" tab, navigate down to approximately line 24 to find the following (or whatever you've edited it to):

{if $[create_thread_button]}
                <ul class="controls"><li>$[create_thread_button]</li></ul>
 {/if}

What you want to edit is NOT the button variable in the {if} conditional, but rather in the actual HTML. Change:

<ul class="controls"<li>$[create_thread_button]</li></ul>

to:

<ul class="controls"><li><a href="$[create_thread_button.href]"><img src="//storage2.proboards.com/7255414/images/jOkPyGvEVNXGrbjzzoDi.png"></a></li></ul>

The explanation Chris posted, a little bit more simplified, the lines {if} and {/if} are a condition: kind of like saying "if you eat your veggies, you'll get dessert." These conditional statements, as they are called, are checking to see if the "veggies" (the part that follows the opening {if}) have been "eaten". If they have, then anything after it up until the closing {/if} will be displayed or executed (the "dessert"). However, if the "veggies" have not been "eaten", then the content will not display or execute (no "dessert" since the "veggies" were not "eaten").

Once you have these changes in place, you can Save, and this should appear. Example can be found here: kamitest3.proboards.com/board/1/general-board

An EASIER way to do this, without having the image URL to contend with, is to use the image variable.

If you look on the right-hand side of the editor, you'll see a list of variables. Scroll all the way down, until you see the word theme; expand this, and you'll find images; expand this as well, and you'll see the file names of your uploaded custom images.

Click on the file name of the image you're trying to use. This will expand, but you don't need to worry about that! Press the file name itself so that it's highlighted. Then at the bottom of the container holding that list of variables, you'll see a button that says < Insert. Make sure that your cursor is in the text box, at the exact place you want to put the image. Then press the < Insert button.

Something should appear that looks like $[theme.image.FILENAME]. That is the variable generated to display that image.

[bubblegum]

Aaaaaah... Between Chris's and your help, Kami, i think i understand now. i REALLY appreciate the help, not only explaining what to do, but the why behind it. (even explaining some extra tips!) There has been some actual learning happening here, and i sincerely appreciate the time everyone took to help me. <3 <3

The button is up and working! It is, however, sitting a tiny bit high. Is there a way to lower it a bit? i assume it is sitting in its own cell (that the right term?) independent of the title bar banner text.

[Kami]

Jan 21, 2022 11:50:55 GMT -8 bubblegum said:

Aaaaaah... Between Chris's and your help, Kami, i think i understand now. i REALLY appreciate the help, not only explaining what to do, but the why behind it. (even explaining some extra tips!) There has been some actual learning happening here, and i sincerely appreciate the time everyone took to help me. <3 <3

The button is up and working! It is, however, sitting a tiny bit high. Is there a way to lower it a bit? i assume it is sitting in its own cell (that the right term?) independent of the title bar banner text.

Let me know if you have any other questions! I'm a pretty dab hand at the templates if I do say so myself, so please feel free to let me know.

Yep there's definitely a way to do that. I can do the teach a person to fish method, or I can give you the fish. Which would you prefer? For the latter, I would need a URL to your forum (you can PM me if you don't want to post it publicly).

[Kami]

bubblegum - Thanks for the PM! Answering here to close the loop on this thread. If you wanted to add an effect on rollover, could you create a new thread? Based on what you sent me, the thing you added isn't working due to a mistake in how you copy/pasted the code, but I'd like to break it down a little further to see what the steps you were taking were, etc to better tailor my answer. Just a general tip, when copy/pasting coding, be sure to be mindful that you are not pasting in the middle of phrases or cutting off the thing you are copying.

For this particular issue, here's the "give a fish" solution:

1. Go to Admin > Themes > Advanced Styles & CSS

2. Click on the tab that says "Stylesheet"

3. Scroll all the way to the bottom; click into the text box, and for the sake of keeping things tidy, hit the enter key a few times to separate new entries from old ones.

4. Copy and paste the following into your stylesheet and save:

/* Nudge Create Thread Image */
.title-bar ul.controls li a img {
 margin-top: 15px;
}
If you need/want to, change the "15" if you need to (make sure to leave the px) in order to nudge it in the direction you choose; a higher number will push it down, and a lower number will bring it up. Let me know how you get on!

---

The "teach to fish" part:

What I did was hover over the image for the Create Thread button and right clicked; in the right-click menu there's an option that says "Inspect Element" -- this will open up a panel in your browser that shows the HTML that surrounds that element, like so:

Once I had this open, I did a little testing to make sure that the solution I was thinking of was simple — this is the part I can't really teach, because this comes from literally almost 20 years of doing web development and knowing CSS; it can definitely be learned, and I'll give you a crash course on why I thought of this solution, but just wanted to give context.

The thought process here was to see if I could single out the button and simply physically nudge it down to where it ought to be. The usual way of doing that with CSS it to set a margin; similar to the margins on a paper, this creates a "gap", so to speak, around the element that's being targeted. In this case, since the button is too high up, I would target the top to create a margin above the button.

To test my theory, I clicked into this little box underneath the inspect element HTML: This allows me to (on my view only) add some CSS to the element to see what would happen. I then added the CSS margin-top: 15px;

This adds a 15 pixel margin to the top of the element. The results are as you see here:

Next, to give you the property to target, I looked at this portion of the inspect element window. This tells us the nested class names and IDs of the particular element. The further right you go, the closer you get to the element you want to target.

In this case, I didn't need to use all of them — we only need to target the specific create thread image in the title bar, and since no other image appears in that area (as you only have 1 create thread button), i went ahead and chose to use the following:

div.titlebar ul.controls li a img

div.titlebar -- specifies we are targeting all div elements with the class name of titlebar

ul.controls -- since this comes after div.titlebar, this targets any ul element with the class name of controls located within any div with the class name titlebar

li -- since this comes after ul.controls, this targets the li element within ul.controls within div.titlebar

a -- this targets the a (anchor) element within the li within ul.controls within div.titlebar

img -- this targets the image within the anchor within the li within ul.controls within div.titlebar

PHEW. Hopefully you're still with me. Once I identified the specific thing to target, the rest was just adding the CSS property of margin-top:15px and making sure my closing and opening brackets were in place.

This is a bit long, so please let me know if you need any clarification. I hope it helps!

[bubblegum]

Thank you so much Kami! i appreciate the time and effort you've put into this. i've looked into the 'inespect element' thing in the past for other reasons. What a neat application for it here to play with in the future to see if i can figure things out.

And again, thank you to all those who chimed in to help me.

Consider this one resolved!

[Kami]

Jan 22, 2022 16:35:02 GMT -8 bubblegum said:

Thank you so much Kami! i appreciate the time and effort you've put into this. i've looked into the 'inespect element' thing in the past for other reasons. What a neat application for it here to play with in the future to see if i can figure things out.

And again, thank you to all those who chimed in to help me.

Consider this one resolved!

Happy to help! I'll be offline until Monday, but if you have any other questions please don't hesitate to make a new thread!