Basic Configuration

[Julius_2000]

All

So, it's essentially my last picture only a bit bigger. Do you want the blue rectangle background to a bit narrower, like the  85% width you had before or can it be as wide as the topic container below, like in my last picture? The space between the svg and the search bar is of course determined by the aspect ratio of the image.

By the way , if you would pLace the svg  I gave you without the blue frame in your custom folder, I could set a css border around it and apply any color you want from there.

[chris319]

The ONLY things that need to change are the size and vertical position of the svg test pattern. It may require moving the svg slightly lower.

The search bar stays right where it is.

The blue background stays right where it is.

No change to width.

No additional borders.

Why is it so difficult to change the dimensions of the svg image without changing anything else?

https://www.videotechnologyforum.org/

[Kindred]

did you see my post?

for #search_form add
margin-top: -40px;

and in #header, change
padding: 2px 2px 12px 2px; to padding: 2px 2px 2px 2px;

the Image itself has a set height/width ratio (200x400)
all changes to width will result in a change to height...   so, removing the 450 max-width of the header results in a HUGE image that spans 100% of the width, but also takes up the entire screen on my laptop for height.

[Julius_2000]

The ONLY things that need to change are the size and vertical position of the svg test pattern. It may require moving the svg slightly lower.

The search bar stays right where it is.

The blue background stays right where it is.

No change to width.

No additional borders.

Why is it so difficult to change the dimensions of the svg image without changing anything else?

https://www.videotechnologyforum.org/

I'm sorry to say that but it's because you don't seem to understand the principles of how these things work.

Here's an example of what the reality of your theme is in its current layout. I colorized the elements for you so you understand why it's not just a matter of dragging the image to the bottom.
You cannot view this attachment.

And this is my solution that's quick and would (in my mind) achieve what you are trying to get to:
You cannot view this attachment. 
I put the 450px width (increased it to 460px to make up for the "loss" of the searchbar) to h1.forumtitle a instead of h1.forumtitle and removed its padding. Then I removed the background color from the header and applied it to the forumtitle.
I don't know how else I can get you there without tinkering too much with more stuff.

No additional borders.

I believe you misunderstood me here. You said that you wanted your artist to change the color of the blue frame because you weren't yet satisfied with it. And I suggested to you to just take the svg that I sent you where I removed the baked-in frame and to apply a CSS border so that YOU can play with the color you like best WITHOUT paying anything at all.

for #search_form add
margin-top: -40px;
and in #header, change
padding: 2px 2px 12px 2px; to padding: 2px 2px 2px 2px;

This solution only works on larger screens. When it gets to mobile devices or even laptop screens or whatever the end users is going to access the site with this will result in an unusable searchbar because it gets pushed behind the image.

[chris319]

Ah, I see. banner_explanation.png makes the dilemma clear.

How about if the search bar is moved somewhere else on the page? Then we have the test pattern filling the grayish-blue box from top to bottom and it looks more unified.

Could the search bar be moved below the section that says "Quick Links, Admin, Moderate"? With the same background color and width as "Quick Links, Admin, Moderate"?

Thanks.

[TwitchisMental]

Hello Chris319,

Maker of the theme that you are using here.

Would this be what you are wanting to do?

You cannot view this attachment.

You cannot view this attachment.

[Kindred]

I mean, seriously...am I talking to myself here?   I have literally told you the two minor changes you need to make twice now.

[TwitchisMental]

I mean, seriously...am I talking to myself here?  I have literally told you the two minor changes you need to make twice now.

They did and explained the issue that they have with it.

for #search_form add
margin-top: -40px;
and in #header, change
padding: 2px 2px 12px 2px; to padding: 2px 2px 2px 2px;

This solution only works on larger screens. When it gets to mobile devices or even laptop screens or whatever the end users is going to access the site with this will result in an unusable searchbar because it gets pushed behind the image.

Which is true.

[Kindred]

So, use css media option to hide the searchbox..

However, the code I gave works perfectly well on my laptop

[Julius_2000]

Hello Chris319,

Maker of the theme that you are using here.

Would this be what you are wanting to do?

You cannot view this attachment.

No, what he wants is something like this:
You cannot view this attachment.

So, use css media option to hide the searchbox..

However, the code I gave works perfectly well on my laptop

Test it in the Dev Tools'  screen size emulator. My solution would keep the search bar where she is an give the impression that the image/blue background is the actual header.

[chris319]

JACKPOT!

Thanks, Julius, banner_want.png is it! That looks SO MUCH BETTER!

Is there a way to close up that white space where it says "News: SMF Just Installed"?

Thanks for putting up with my micromanaging

What kind of pizza do you want?

Thanks, Twitch. BTW note that I have modified the text height to 114% on my board.

Will this work OK on an assortment of devices?

Thanks again.

[Julius_2000]

Chris, I always knew that you wanted this but also told you that it is not that easily done. Fact is, I made this pic exactly the way I described to you why this doesn't work like that because these are TWO div elements.

This requires to make changes to the Index.Template.php to place the searchbar somewhere outside and below the header. I can give it a try tomorrow.

Is there a way to close up that white space where it says "News: SMF Just Installed"?

In your index.css

Code Select Expand

.boardindex_table:not(:last-child) {
    margin-bottom: 15px;
    margin-top: 15px;
}Remove margin-top or give the a value of 0 or "comment it out" by putting /* */ around it.

Would you be ok with this approach?
You cannot view this attachment.

[chris319]

Yes!

Just bring the bluish-gray panels all the way out to be flush with the elements below.

[TwitchisMental]

Hello Chris319,

Maker of the theme that you are using here.

Would this be what you are wanting to do?

You cannot view this attachment.

No, what he wants is something like this:
You cannot view this attachment.

Then honestly adding position relative to the header, adjusting the padding+width, and then absolute positioning of the search bar would be the easiest way to get the desired results..

For the mobile issue, go into responsive css to hide the search around 780px instead of 720px.


You cannot view this attachment.

[chris319]

Just make the blue with the word "BOARDS" touch the blue above it with no white space in between, and we are there.

[Julius_2000]

Hello Chris319,

Maker of the theme that you are using here.

Would this be what you are wanting to do?

You cannot view this attachment.

No, what he wants is something like this:
You cannot view this attachment.

Then honestly adding position relative to the header, adjusting the padding+width, and then absolute positioning of the search bar would be the easiest way to get the desired results..

For the mobile issue, go into responsive css to hide the search around 780px instead of 720px.


You cannot view this attachment.

Easy, yes (as was Kindred's solution). Practical? I don't think so. As it is right now, even the login, register and mobile menu disappear at 720 screen width, preventing mobile users from even logging in. I don't know if this was intentional?

[chris319]

Easy, yes (as was Kindred's solution). Practical? I don't think so. As it is right now, even the login, register and mobile menu disappear at 720 screen width, preventing mobile users from even logging in. I don't know if this was intentional?

No, not intentional.

Now how to integrate these changes into the actual site?

[Julius_2000]

if this was intentional?
No, not intentional.

I meant Twitch.

Now how to integrate these changes into the actual site?

Download the following files:

Put the svg of your logo without the frame in your Themes/images/custom folder
You cannot view this attachment.

In Admin/Configuration/Current Theme:
In Image Url change the image name at the end to the file's one.

Add these files to your CSS folder (make backup of old ones)
You cannot view this attachment.
You cannot view this attachment.

Put this into your Theme folder where the other php files are
You cannot view this attachment. 

I took the liberty to make some other changes while I was at it (marked as /*changed*/. Among other things, I changed the font size of the top menu because it was super tiny and also adjusted the width for icons as they were too close to the text at your font size of 114%.

This is how it looks now:
You cannot view this attachment.You cannot view this attachment. 

If you want to change the color shade of your logo's border/ frame, go to:

Code Select Expand

.forumtitle img {
    width: 450px;
    border: 7px solid rgb(68, 132, 255);
}If you want to see how it looks before you save it, follow the tip to use your Developer Tool of your browser (press f12). You can then visually manipulate the color by clicking on the color icon which opens a color panel.

[chris319]

This is how it looks now:

Great!

Can you make the grayish-blue panels on either side of the test pattern come all the way out aligned with the element below?

Thanks.

[Julius_2000]

Can you make the grayish-blue panels on either side of the test pattern come all the way out aligned with the element below?

Well, I left it at 85% because you were pretty clear that you didn't want any other changes

The search bar stays right where it is.

The blue background stays right where it is.

No change to width.

No additional borders.

So, now you want the blue background stretched out aligned with the content body below?!

If so, you can do that yourself! Go to index.css and remove the 85% width from the #header. It'll go back to the 100% which is still there.