HELP! with "profile" theme

metalconblog · Member · Mar 27, 2014 at 8:45 pm
Copy link

Add topic to favorites
I am using the profile theme.
I even opted for the $30 CSS control upgrade simply because I dislike how my header is appearing along with my menu and logo.

1. (The header image appears extremely stretched & pix-elated (no matter what image i put there! I have tried HUGE ones!) does anyone know the SIZE NEEDED FOR THE HEADER IMAGE TO APPEAR WITHOUT STRETCHING?!

2. I would be content if the header logo “METALCON” would appear lower on the screen (preferably above the social media buttons) and BIGGER. Can i move/change this with CSS? if so, HOW!?

3. Also, the menu looks awkwardly placed, Idealy I would like to get rid of the menu (due to its CSS aesthetics) and just create a link to http://www.metalcon.com in its place, ideas? OR BETTER YET! make the header logo a LINK to the http://www.metalcon.com

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Mar 31, 2014 at 10:28 pm
Copy link
1. (The header image appears extremely stretched & pix-elated (no matter what image i put there! I have tried HUGE ones!) does anyone know the SIZE NEEDED FOR THE HEADER IMAGE TO APPEAR WITHOUT STRETCHING?!

All themes should have the recommended header size listed right at the top of the Appearance > Customize > Header panel. I checked that for the Profile theme and I found it suggests a minimum size of 1200×600 pixels. Can you try an image at least that size and let me know if you’re still having trouble after that?
designsimply · Member · Mar 31, 2014 at 10:56 pm
Copy link
2. I would be content if the header logo “METALCON” would appear lower on the screen (preferably above the social media buttons) and BIGGER. Can i move/change this with CSS? if so, HOW!?

To do that, I would recommend using absolute positioning to move the social media icons and then just add some extra space above the custom header area. Here is an example to get you started:
```
.home #custom-header {
	margin-top: 140px;
}

.home div.container.blog > .social-icons.social-blog {
	position: absolute;
	top: 60px;
	width: 97%;
}
```
Add that to your Appearance > Customize > CSS editor and adjust the numbers as needed. You might want to change the margin-top and top values to what looks best to you.

The “.home” part of the selectors above limit the change to the home page—that’s where I noticed the social media buttons.

Here is an article about absolute positioning in case you want to learn more about it:

Absolute Positioning Inside Relative Positioning
designsimply · Member · Mar 31, 2014 at 11:17 pm
Copy link
3. Also, the menu looks awkwardly placed, Idealy I would like to get rid of the menu (due to its CSS aesthetics) and just create a link to http://www.metalcon.com in its place, ideas? OR BETTER YET! make the header logo a LINK to the http://www.metalcon.com

I see that you currently have one item in the menu and it’s pointing to

One possible solution would be to move the text for the menu item link off-left and then set a specific width and height for the menu link itself and move it over the top of the site title. It’s a very tricky change, and it might not be perfect, but here’s an example you can try out:
```
#navigation .menu {
	background: none;
}
#navigation div.menu {
	position: relative;
	width: 97%;
	top: -140px;
}
#navigation ul.menu a {
	text-align: left;
	text-indent: -9999px;
	width: 290px;
	height: 60px;
}
```
This moves the link element but doesn’t get rid of the space it was using. I’m not sure I would recommend shortening up the space because of how the header image fits into that space. The way the Profile theme is designed, the header image would get clipped at large screen sizes if you make the height smaller. You can see what I mean by adding this CSS and then testing the site at different screen sizes:
```
.home-header {
	min-height: 300px;
}
```
You may need to fiddle with the number values to get the exact look you’re going for.

Profile uses a CSS property called “background-size” with the “cover” value, and it would probably be worthwhile to check out this page about how cover is designed to work so you have a good understanding of it when you adjust the header height:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
metalconblog · Member · Apr 2, 2014 at 9:13 pm
Copy link
The location of those aspects seems to change based on what view I am in.

For instance, when I am under customization code, everything lines up as I would like, However once i save it, everything moves around.

Should I assume the preview is correct, or after clicking save view is correct?

Ie: Right now, in my preview everything is overlapping a bit on top. But it views fine after saving (or so I hope)

I guess I am asking, which do I trust is the actual view you all see?
metalconblog · Member · Apr 2, 2014 at 9:30 pm
Copy link
Also, there is a bunch of grey on the page, (ex: the menu link http://www.metalcon.com) as well as “posted on” however, i have css changing all of my links to black or purple. as well as all of the font black, I am not sure where to find this setting?

Thank you design simply, I am getting there.

However This theme seemed to sleek and sophisticated when I purchased it, and now I feel as if I have simply butchered it up. Any suggestions are greatly appreciated.
metalconblog · Member · Apr 2, 2014 at 9:31 pm
Copy link
so sleek and sophisticated*
designsimply · Member · Apr 3, 2014 at 2:19 am
Copy link
I love the Profile theme, and I think it is indeed a sleek and sophisticated looking theme.

I agree that the main header image is a key ingredient to making it look good, and it might be that the recommended header image size given by the theme might not be big enough for the image you want to use. If you have a larger version of it, I’d try to upload a couple larger sizes to see if you can’t get it looking better. I think a larger image with the right dimensions might make it look a lot better very fast.

I did look at the custom header image you’re using now:
http://metalcon2014.files.wordpress.com/2014/04/cropped-testing1.png

And I noticed it is 1200 x 408 pixels, but the theme recommends an image size of at least 1200 x 600 pixels. The difference in height could be part of what’s making it look a little pixelated in your case.

This image that you’re using for the site title is another example:
http://metalcon2014.files.wordpress.com/2014/04/logo.png

The quality isn’t solid for using transparency on a darker background. I can see traces of white, jagged lines around the edges of the text in that graphic, and that’s probably contributing to the lower-quality feeling you’re describing.

I think better graphics will go a long way to bring this theme (and any theme you pick really) into better shape. Images are really important when it comes to making something really professional looking.
designsimply · Member · Apr 3, 2014 at 2:20 am
Copy link
For instance, when I am under customization code, everything lines up as I would like, However once i save it, everything moves around.

Are you perhaps looking at the mobile or tablet sized view in the Appearance > Customize section? If you’re looking at the desktop view, everything should look pretty much the same between the preview and the front page.
designsimply · Member · Apr 3, 2014 at 2:22 am
Copy link
I guess I am asking, which do I trust is the actual view you all see?

That’s the thing with web design. It varies! Different people can have different screen sizes. Most excellent themes these days (like Profile) are built with what’s called a responsive design which makes modifications based on screen size to try to keep everything looking awesome and working great at a wide variety of screen sizes and different devices like mobile phones.

Thank you design simply, I am getting there.

You have a great start! Try nailing down quality graphics as a first step. I think that will help a lot.

No items found.