BUCKY
New Member
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
Posts: 141
inherit
169862
0
Mar 7, 2024 13:00:14 GMT -8
BUCKY
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
141
August 2011
bucky
|
Post by BUCKY on Feb 24, 2020 10:17:19 GMT -8
Forum URL: moparsinscale.proboards.com/Hi, folks! Raining here.....again! I am an admin at the above named forum. I already have an image in the Global Header at the forum. I'd like to know if there is a way to add an image and have them side-by-side in the Global Header? Thanks for all your help. Keith Buckner(BUCKY)
|
|
#e61919
Support Staff
224482
0
Member is Online
1
Mar 28, 2024 9:42:10 GMT -8
Scott
23,129
August 2015
socalso
|
Post by Scott on Feb 24, 2020 10:47:36 GMT -8
|
|
BUCKY
New Member
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
Posts: 141
inherit
169862
0
Mar 7, 2024 13:00:14 GMT -8
BUCKY
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
141
August 2011
bucky
|
Post by BUCKY on Feb 24, 2020 21:24:31 GMT -8
I guess I did something wrong, as the second photo didn't appear, and it is a photo that is posted in a thread on the forum.
|
|
#eb7100
1480
0
1
Mar 28, 2024 3:30:24 GMT -8
Craig
208,824
September 2001
cmdynasty
|
Post by Craig on Feb 25, 2020 3:44:04 GMT -8
I am only seeing the HTML for one image in the header. Could you post the code you entered [ including the image links ]
|
|
BUCKY
New Member
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
Posts: 141
inherit
169862
0
Mar 7, 2024 13:00:14 GMT -8
BUCKY
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
141
August 2011
bucky
|
Post by BUCKY on Feb 25, 2020 7:14:09 GMT -8
I tried a different approach.
Here is what I have:
<img src="https://images40.fotki.com/v381/photos/7/1319407/14534409/62Chrysler300H-vi.jpg"><img src="https://images15.fotki.com/v1669/photos/3/177223/11317209/2019021018_42_54-vi.jpg" alt="" style="max-width:60%;display: block; margin-left: auto; margin-right: auto;"
The pics didn't come out side-by-side, and the first pic increased in size.
|
|
#e61919
Support Staff
224482
0
Member is Online
1
Mar 28, 2024 9:42:10 GMT -8
Scott
23,129
August 2015
socalso
|
Post by Scott on Feb 25, 2020 10:05:54 GMT -8
BUCKY , Your original image code is this: <img src="https://images40.fotki.com/v381/photos/7/1319407/14534409/62Chrysler300H-vi.jpg" alt="" style="max-width:60%;display: block; margin-left: auto; margin-right: auto;"> When adding the 2nd image you removed the attributes tied to the first image and applied them to the 2nd. As such the part of the code reducing the size of the 1st image was remove and so the 1st image displays original size and since there is not much room left it pushes the 2nd image to the next line. Replace your image code in the header with this: <style> .topimg { display:inline-block; margin-left: auto; margin-right: auto; } #images{text-align:center;} </style> <div id="images"><img class="topimg" src="https://images40.fotki.com/v381/photos/7/1319407/14534409/62Chrysler300H-vi.jpg" alt="" style="max-width:40%;"> <img class="topimg" src="https://images15.fotki.com/v1669/photos/3/177223/11317209/2019021018_42_54-vi.jpg" style="max-width:50%;"></div> Part of the issue is the size of the images. Best if you can resize them beforehand if possible. If not that is where the "max-size" comes in to play. If you notice in the code above each image has a different max-size percentage. This is so they display similar in size and stay on the same line.
|
|
BUCKY
New Member
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
Posts: 141
inherit
169862
0
Mar 7, 2024 13:00:14 GMT -8
BUCKY
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
141
August 2011
bucky
|
Post by BUCKY on Feb 25, 2020 11:31:05 GMT -8
When adding the 2nd image you removed the attributes tied to the first image and applied them to the 2nd. As such the part of the code reducing the size of the 1st image was remove and so the 1st image displays original size and since there is not much room left it pushes the 2nd image to the next line.
I kind of thought that's what I had done. I'll give this new formula a try. Thanks.
|
|
BUCKY
New Member
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
Posts: 141
inherit
169862
0
Mar 7, 2024 13:00:14 GMT -8
BUCKY
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
141
August 2011
bucky
|
Post by BUCKY on Feb 25, 2020 12:14:31 GMT -8
That trick worked. Thanks, so much!
|
|
inherit
252032
0
Sept 18, 2023 9:07:51 GMT -8
Retread
Tribbial Pursuit.
5,014
January 2018
retread
|
Post by Retread on Feb 26, 2020 6:14:01 GMT -8
Hey BUCKY I dressed things up by putting things in containers and using a background color, shadow, etc. You're welcome to try this out. <link href="https://fonts.googleapis.com/css?family=Courgette|Open+Sans&display=swap" rel="stylesheet"> <style> .awards-outer{ font-family:Open Sans; font-weight:bold; font-size:1.1vw; text-align:center; color:#aaaaaa; background-color:#333333; border-radius:0.4vw;-moz-border-radius:0.4vw;-webkit-border-radius:0.4vw; padding:1.5vw;margin:auto; box-shadow:inset 0vw 0vw 1.1vw 0.8vw rgba(77, 181, 255, 0.9); margin-bottom:10px; } .awards-outer h1{ font-family:Courgette; font-size:200%; color:#cc9933; } .awards-outer h2{ font-family:Palatino Linotype; font-size:120%; margin-bottom:0.25vw; } .awards-outer i{ font-family:Courgette; font-weight:normal; margin-left:2em; } .awards-outer img{ max-width:100%; } .awards-left{ float:left; width:43%; } .awards-right{ float:left; width:57%; } .awards-left div{ margin:0vw 0.25vw 0.5vw 0.5vw; } .awards-right div{ margin:0vw 0.5vw 0.5vw 0.25vw; } .clr{ clear:both; } </style>
<div class="awards-outer"> <h1> Model of the Month Awards </h1> <div class="awards-left"> <div> <h2> December, 2019 </h2> <img src=" images34.fotki.com/v1212/photos/7/1319407/14534409/62Chrysler300H1-vi.jpg "> <p> 1962 Chrysler 300H Convertible <i>by</i> goofy62 </p> </div> </div> <div class="awards-right"> <div> <h2> January, 2020 </h2> <img src=" images15.fotki.com/v1669/photos/3/177223/11317209/2019021018_42_54-vi.jpg "> <p> 1967 Dodge Coronet R/T <i>by</i> 1320wayne </p> </div> </div> <div class="clr"></div> </div>
|
|
BUCKY
New Member
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
Posts: 141
inherit
169862
0
Mar 7, 2024 13:00:14 GMT -8
BUCKY
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
141
August 2011
bucky
|
Post by BUCKY on Feb 26, 2020 9:28:22 GMT -8
WOW!!! That's a lot of code!!! LOL
I'll experiment with this formula, and see what happens. Thanks!
One question.... Does the first line that starts out <link href..... go into the header box in admin, too?
|
|
inherit
252032
0
Sept 18, 2023 9:07:51 GMT -8
Retread
Tribbial Pursuit.
5,014
January 2018
retread
|
Post by Retread on Feb 26, 2020 9:42:59 GMT -8
One question.... Does the first line that starts out <link href..... go into the header box in admin, too? Yes indeed. That line makes a couple of Google Fonts available for use, both for the code I wrote and elsewhere on the forum.
|
|
BUCKY
New Member
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
Posts: 141
inherit
169862
0
Mar 7, 2024 13:00:14 GMT -8
BUCKY
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
141
August 2011
bucky
|
Post by BUCKY on Feb 26, 2020 10:31:01 GMT -8
Okay...thanks.
|
|
BUCKY
New Member
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
Posts: 141
inherit
169862
0
Mar 7, 2024 13:00:14 GMT -8
BUCKY
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
141
August 2011
bucky
|
Post by BUCKY on Feb 26, 2020 16:59:03 GMT -8
Hi, Retread.
How do I change the font color for that set of codes? And, can I apply this to my other forum, as well? I know I'd have to change the wording and pics.
Thanks!
|
|
inherit
252032
0
Sept 18, 2023 9:07:51 GMT -8
Retread
Tribbial Pursuit.
5,014
January 2018
retread
|
Post by Retread on Feb 26, 2020 18:08:37 GMT -8
Hey BUCKY I added some comments to explain what several of the lines do. They won't affect the operation and can be left in if you like. I've also added a line in the internal Style Sheet so you can change the color of the text for the secondary headings. I used colors that are defined with hex codes. But if you want to change those for named colors, that's okay. This listing shows 140 color names that all browsers should recognize: HTML Color NamesThe coding isn't specific to a particular forum, so you can use this on any proboards.com, boards.net. freeforums.net, or forums.net forum. <link href="https://fonts.googleapis.com/css?family=Courgette|Open+Sans&display=swap" rel="stylesheet"> <style> .awards-outer{ /* everything in this section will affect the entire container, UNLESS it's overwritten by later sections. */ font-family:Open Sans; font-weight:bold; font-size:1.3vw; /* this ^ sets the font size for all text. Make this larger if you like but if a line wraps to the next line, you've chosen to large of a value. Headings are multiplied by a percentage to make them larger. */ text-align:center; color:#aaaaaa; /* this defines the color of text throughout */ background-color:#333333; /*this is the background color for the container */ border-radius:0.4vw;-moz-border-radius:0.4vw;-webkit-border-radius:0.4vw; padding:1.5vw;margin:auto; box-shadow:inset 0vw 0vw 1.1vw 0.8vw rgba(77, 181, 255, 0.9); /* this produces the blue box-shadow. If you need to change this, we'll need to discuss. */ margin-bottom:10px; } .awards-outer h1{ font-family:Courgette; font-size:200%; color:#cc9933; /* text color for the UPPERMOST heading */ } .awards-outer h2{ font-family:Palatino Linotype; font-size:120%; margin-bottom:0.25vw; color:inherit; /* you can set the text color for the secondary headings, here */ } .awards-outer i{ font-family:Courgette; font-weight:normal; margin-left:1em; } .awards-outer img{ max-width:100%; } .awards-left{ float:left; width:43%; } .awards-right{ float:left; width:57%; } .awards-left div{ margin:0vw 0.25vw 0.5vw 0.5vw; } .awards-right div{ margin:0vw 0.5vw 0.5vw 0.25vw; } .clr{ clear:both; } </style>
<div class="awards-outer"> <h1> Model of the Month Awards </h1> <div class="awards-left"> <div> <h2> December, 2019 </h2> <img src=" images34.fotki.com/v1212/photos/7/1319407/14534409/62Chrysler300H1-vi.jpg "> <p> 1962 Chrysler 300H Convertible <i>by</i> goofy62 </p> </div> </div> <div class="awards-right"> <div> <h2> January, 2020 </h2> <img src=" images15.fotki.com/v1669/photos/3/177223/11317209/2019021018_42_54-vi.jpg "> <p> 1967 Dodge Coronet R/T <i>by</i> 1320wayne </p> </div> </div> <div class="clr"></div> </div>
|
|
BUCKY
New Member
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
Posts: 141
inherit
169862
0
Mar 7, 2024 13:00:14 GMT -8
BUCKY
onlinescalemodelers.proboards.com; moparsinscale.proboards.com
141
August 2011
bucky
|
Post by BUCKY on Feb 26, 2020 19:05:50 GMT -8
Thank you, sir! You have been most helpful!
|
|