Basic Configuration

[chris319]

Did you forget to close one of the classes/ id's? There should be {  } around their css properties. Your site looks like it doesn't load your index.css properly.

That's it. The five seconds are up. I give up. My patience is exhausted. I'm not an expert CSS programmer and I'm just flailing around.

The project is dead and SMF killed it. I've been struggling for hours just to change a bloody banner. Now I'm out the $300 I paid my graphic artist.

[Julius_2000]

Go to Admin/Configuration/Current Theme
and copy this link into the field where it says Logo image url
https://www.videotechnologyforum.org/Themes/ProCurve/images/custom/logo.svg

Edit: See, the link even works because it's already there! Don't give up! Just put that link into the Logo image url in current theme.
You don't need to delete anything, just reference it.

Btw, I've downloaded your svg and can convert it to png if needed.

See, it's still there. I just put in the link above:
You cannot view this attachment.

[chris319]

It works! And it's even centered! Thanks, Julius. Can I buy you a pizza?

Almost ready to go now. My artist is going to change the shade of blue in the border and I need to check the registration settings before I open it up for business.

[Julius_2000]

You made it! Congrats!! Now, just add the recommended things to your index.css and you should be good to go.

But always make a backup of your css files and any other files that you edit!! That way, you can always at least go back to square one.

Witha quick edit in your index.template.php, you could even place the svg code there and then edit its color in index.css. Or, you could install https://inkscape.org/release/inkscape-1.2.1/ and do it yourself!

No need spend any more money!

[chris319]

Now how can I make my banner just a little smaller?

I followed your directions from a previous post and they didn't work.

[Julius_2000]

Try this. But before you do, backup the original css file.

Deleted attachment.

Sorry, I realized that you have made changes to your index.css already. So, go to your specific index.css of your theme and copy and past these to the appropriate places or place them at the bottom of the file (though it would mean redundant lines of code):

Code Select Expand

#header {
    background: rgb(85, 126, 160);
    box-shadow: 0 16px 20px rgba(255, 255, 255, 0.25) inset;
padding: 2px 2px 12px 2px;
display: flex;
align-items: flex-end;
width: 100%;
border-radius: 7px;
flex-wrap: wrap;
justify-content: center;
}

Code Select Expand

h1.forumtitle {
font-size: 1.8em;
font-family: Verdana, Helvetica, Arial, sans-serif;
padding: 22px 12px 6px 10px;
font-weight: normal;
width: 100%;
display: flex;
justify-content: center;
}

Code Select Expand

h1.forumtitle a {
color: #a85400;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
width: 450px;
}

Code Select Expand

#search_form {
padding: 3px;
margin-right: 10px;
margin-left: auto;
}
If you want your banner's width changed, go to h1.forumtitle a

[Kindred]

Is you code and css calling for the svg?

[chris319]

Is you code and css calling for the svg?

Yes they is.

[chris319]

Julius:

You're giving me values in px. I thought we'd be better off working in %.

My text size is set to 114%.

[Julius_2000]

There's no rule, there are many ways of achieving what you want.
I figured that when I use % it would get too small on small devices in case your members want to access the forum via smartphones. Of course, one could address that with a media query in the responsive.css but I thought this would be good enough for the time I could spend on it. Just play with the value and see what fits best for you.

Edit:

Maybe this could be a bit easier, less code:

in index.css
In #header change display from flex to block

Code Select Expand

#header { 
       display: block;
}
In h1.forumtitle add this:

Code Select Expand

       padding: 10px !important;
       width: 450px;
       max-width: 100% !important;
       margin: 0 auto !important;
in In h1.forumtitle a add this:

Code Select Expand

      display: block;
      padding: 0 !important;
     max-width: 100% !important;

That would make it look like this:
You cannot view this attachment.

Change width and the padding to your heart's content.


Ah screw that. If you haven't changed anything beyond font-size in your index.css use my modification:
You cannot view this attachment.

Backup your original index.css!

[chris319]

I set a different width parameter to 85%. Here's what it looks like now:

https://www.videotechnologyforum.org/index.php

Any way to make the test pattern/svg image a little bigger to fill that space on the sides?

Thanks again for your valuable help.

[Julius_2000]

I set a different width parameter to 85%. Here's what it looks like now:

https://www.videotechnologyforum.org/index.php

Any way to make the test pattern/svg image a little bigger to fill that space on the sides?

Thanks again for your valuable help.

Glad I could help.

As you can see, using 85% on the header shrinks it. If you don't want that, you would need to adjust the forumtitle's width instead.

As for the image: not without touching it itself. You can open it in an editor like Inkscape and edit it there. One would have to adapt all the elements to keep the design without stretching them. Let me see..

[Julius_2000]

@chris319 I sent you a PM.

I removed the blue frame of your svg and gave the HTML element the image resides in the same gray background as your banner's and added a border to it. Put the files in the respective folders and test it out. Make a backup of your index.css.

Should look like this (minus the blue frame on this current svg)
You cannot view this attachment.

Play with the values for width of .forumtitle img (size of your svg) and border width/color of h1.forumtitle

If you don't want the gray banner to fill the entire header and want some space around it like that:
You cannot view this attachment.

Change the padding for #header. For example

Code Select Expand

padding: 10px;


[chris319]

Thanks as always, Julius.

Your modification creates two gray "wings" on either side of the test pattern.

I would like to elongate the test pattern itself to close the gap between the bottom of the test pattern and the bottom of the blue space. This will result in the test pattern being elongated horizontally as well and the test pattern will come close to touching the left edge of the "Search" box.

https://www.videotechnologyforum.org/

[Julius_2000]

Like so?

You cannot view this attachment.

You need to understand that the header consists of two elements, the banner and the search bar. The blue background gives the illusion of it being one object. So, enlarging the image would result in the header being adjusted accordingly.

I would need to edit the Index.template.php file and add a div element around the banner and give its background the color of the current header. This would make the search seem like it's outside the blue rectangle.

[chris319]

Here we have the search bar off to the side. It is more balanced vertically.


http://www.gameshowforum.org/index.php

[chris319]

You were changing the size of the blue surround.

It's the test pattern image only that needs to be resized.

[Julius_2000]

Chris, like I said, the banner and the search bar are two elements sitting inside the header. It's not like the entire blue rectangle was just a canvas and the only thing you need to do is drag the image until it fills the space. You need to think of the header as of boxes sitting on top of each other.

Do you really need the search bar to be included in the blue background? That would require much more work because, as I said, these are two elements that interact with each other, they are related. Changing the size of the image would also change the header's dimension, and thus, the position of its elements.
That's why this was a workaround to make it seem like only the image is in the header, of course I can make the image bigger and the blue box would adjust accordingly. Or one can change the padding around the banner.
You also need to understand that users will have different devices and screen sizes, so it's important to have the elements (image and search bar) be responsive. That means e.g., they should not overlap when viewed on a smaller screen.

The website you gave is a good example of a poorly designed layout. The logo is not centered because the search bar (and its dimensions) is part of the parent (header) element occupying a part of the same space (just like in the image in my reply #41.
Moreover, when you shrink the screen size, the image eventuall goes outside the box.

[chris319]

Do you really need the search bar to be included in the blue background?

No, I don't. The search bar can be just about anywhere as long as it is not on top of the svg test pattern.

All I need is for the svg image (the test pattern) to be larger to fill that empty gap below it.

There is empty space between the bottom of the svg and the bottom of the blue field, and between the right edge of the svg and the left edge of the search bar. If the svg were enlarged slightly and shifted down a little that would do the trick. It would not cover or encroach upon the search bar.

https://www.videotechnologyforum.org/

[Kindred]

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

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