How to change header background area to custom file only? « Support Forum | Kriesi.at

Support Forum » Upscale

How to change header background area to custom file only?

15 posts from 4 voices

Started 1 year ago by VoodooPL
Latest reply from Dude
This topic is resolved

Tags:

No tags yet.

VoodooPL
Member

Hello again guys,
The problem is following, please take a look to marked area below:

Well, client wants to keep dark colour of the background, however he wants the upper part (marked in red above) to be white or light.
If there is a simple way to do this please let me know.
Meanwhile I almost found a solution, decided to make custom "bg_shapes.png" file and overwrite in on the server, the idea was good, however mentioned image doesn't look like I created it because additional layer with color has applied to my custom image. I want to ask You how to leave my custom PNG file to display in the exactly same way like I created it?

Second question.
The menu above is rounded, how to make it more rectangular?

Third question is, how to put title and description above the image, like mentioned below?:

Posted 1 year ago #
Chris Beard
Hey,
it would make our job a lot easier if you could provide a link to your site or a test version somewhere. Your "custom png image" is hard to solve without a live preview.

As for your rounded corners, in your style.css find .rounded_small, .outer_callout, .callout, .featured img, .portfolio_entries_boxed .post-entry, .dynamic_column_boxed, #top .pagination span, #top .pagination a, .featured_image2_darken, .slideshow li iframe, .slideshow li embed, .slideshow li object, .slideshow li video, .avia_video, .post-entry .alignleft, .post-entry .alignright, .post-entry .aligncenter
remove the following 3 from the list above:
```
.featured img,
.featured_image2_darken,
.slideshow li iframe,
```
Get back to me on your first question, meanwhile I'll check on your third question, it's not as simple as you might think.
Posted 1 year ago #
VoodooPL
Member

sorry Chris, I forgot to mention the link before, here it is:
http://www.adwokatnalepka.pl/wordpress/

Problem no.2 is SOLVED - thank You

Waiting for help related to other questions.

By the way how to remove the very top dark bar located above logo ?

Posted 1 year ago #

Dude
Dude

Re 3) - you can modify the template structure in includes/helper-templates.php:

Replace:

//check if we can/should display image
				if(isset($data['image']) && $data['image'] != "" && strpos($data['display'], 'img') !== false)
				{
					$slider = new avia_slideshow(get_the_ID());
		 	 		$output .= $slider->display_small($data['image'], true, $data['caption']);
				}

				//check if we should display post content
				if(strpos($data['display'], 'post') !== false)
				{
					$output .= "<div class='entry-content'>";
					$output .= "<h3 class='dynamic-column-title'><a href='".get_permalink()."' rel='bookmark' title='".__('Permanent link:','avia_framework')." ".get_the_title()."'>".get_the_title()."</a></h3>";

					if(!$additional_loop->post->post_excerpt || $data['value'] == $this->post_id)
					{
						$content = get_the_content('<span class="inner_more">'.__('Read more','avia_framework').'</span>');
						$content = apply_filters('the_content', $content);
						$content = str_replace(']]>', ']]>', $content);
					}
					else
					{
						$content = apply_filters('the_excerpt', get_the_excerpt());
						$content .= '<p><a class="more-link" href="'. get_permalink().'"><span class="inner_more">'.__('Read more','avia_framework').'</span></a></p>';
					}

					$output.= $content;
					$output.= '</div>';
				}

with:

//check if we should display post content
				if(strpos($data['display'], 'post') !== false)
				{
					$output .= "<div class='entry-content'>";
					$output .= "<h3 class='dynamic-column-title'><a href='".get_permalink()."' rel='bookmark' title='".__('Permanent link:','avia_framework')." ".get_the_title()."'>".get_the_title()."</a></h3>";

					if(!$additional_loop->post->post_excerpt || $data['value'] == $this->post_id)
					{
						$content = get_the_content('<span class="inner_more">'.__('Read more','avia_framework').'</span>');
						$content = apply_filters('the_content', $content);
						$content = str_replace(']]>', ']]>', $content);
					}
					else
					{
						$content = apply_filters('the_excerpt', get_the_excerpt());
						$content .= '<p><a class="more-link" href="'. get_permalink().'"><span class="inner_more">'.__('Read more','avia_framework').'</span></a></p>';
					}

					$output.= $content;
					$output.= '</div>';
				}				

				//check if we can/should display image
				if(isset($data['image']) && $data['image'] != "" && strpos($data['display'], 'img') !== false)
				{
					$slider = new avia_slideshow(get_the_ID());
		 	 		$output .= $slider->display_small($data['image'], true, $data['caption']);
				}

So basically we just switch the slideshow/content position. This mod will affect all columns of dynamic templates though. It's not possible to modify certain columns only without major code changes.

Posted 1 year ago #

VoodooPL
Member

Thanks Dude for help, it almost work, after putting Your modified code only the images aren't able to display below the title and excerpt. Would You please check it?

Posted 1 year ago #
Dude
Dude

Ok - I think Chris is right - it's a tricky task. I'll ask Kriesi if we can provide a solution but maybe it requires major css/js changes and in this case it's not possible to switch the slideshow/content area.

Posted 1 year ago #
VoodooPL
Member

Dude, according to problem no.3 I understand that changes will occur to all columns and it's ok, but the problem is that after modifying code according to Your instructions above - images disappeared. I need them back, would You plese check if code is correct?

please check http://www.adwokatnalepka.pl/wordpress/

It should be:
===========
TITLE
description

IMAGE
===========

Posted 1 year ago #
Dude
Dude

Yes - the reason is that the slideshow isn't laid out for this structure. The code change I posted above outputs the right php/html code but the slider won't appear because it requires css/js modifications. I played around with the css code but didn't find a solution. Maybe I just miss a small step but (as I pointed out above) on the other hand I don't know exactly which changes are required. I forwarded it to Kriesi and I hope he can post a solution but I can't promise that no.3 can be done.

Posted 1 year ago #
VoodooPL
Member

now I see, thanks anyway Dude for explanation, I thought previously that this kind of modification is a piece of cake, unofortunately it's not. So please let me know if Kriesi will answer to this question.

Meanwhile, I'm waiting for solution from Chris to problem no.1 and tell me please what about problem no.4 (removing the very top wide bar above logo - how it can be done?)

Thanks for Your kind assistance guys !!!

Posted 1 year ago #
Kriesi
Key Master
Hey!
Please add this to your custom.css file, located in your /css/ folder
```
#top #wrap_all .dynamic_column_boxed .slideshow_container{
clear:both;
top:-51px;
}
```
That should help :)

Regards,
Kriesi
Posted 1 year ago #
VoodooPL
Member

Thanks so much Kriesi, problem no.3 is SOLVED :) it works great on both Mozilla 6 and IE8

Still waiting for Chris' and Dude's answers.
Greetings

Posted 1 year ago #
VoodooPL
Member

Hi again,
according to problem no.3 customer finally decided to make it like this, would You suggest how to make it work like this?

========
TITLE
IMAGE
EXCERPT
========

Posted 1 year ago #

Chris Beard

As for 3 - (Tip: When working with clients it's smart to create photoshop previews so it saves you/others quite some time .. which is now wasted on coding.)

Replace the code provided by Dude with

//check if we can/should display image
				if(isset($data['image']) && $data['image'] != "" && strpos($data['display'], 'img') !== false)
				{
					$slider = new avia_slideshow(get_the_ID());
					if(strpos($data['display'], 'post') !== false)
					{
					$output .= "<h3 class='dynamic-column-title'><a href='".get_permalink()."' rel='bookmark' title='".__('Permanent link:','avia_framework')." ".get_the_title()."'>".get_the_title()."</a></h3>";
				}
		 	 		$output .= $slider->display_small($data['image'], true, $data['caption']);
				}

				//check if we should display post content
				if(strpos($data['display'], 'post') !== false)
				{
					$output .= "<div class='entry-content'>";

					if(!$additional_loop->post->post_excerpt || $data['value'] == $this->post_id)
					{
						$content = get_the_content('<span class="inner_more">'.__('Read more','avia_framework').'</span>');
						$content = apply_filters('the_content', $content);
						$content = str_replace(']]>', ']]>', $content);
					}
					else
					{
						$content = apply_filters('the_excerpt', get_the_excerpt());
						$content .= '<p><a class="more-link" href="'. get_permalink().'"><span class="inner_more">'.__('Read more','avia_framework').'</span></a></p>';
					}

					$output.= $content;
					$output.= '</div>';
				}

The title can be styled/positioned through CSS.

As for your light area you can add a background-image to your #header.
If you want to remove that dark line on the very top you can go in your style.css and remove the background image of
#header .submenu

Posted 1 year ago #

VoodooPL
Member

Everything is perfect, thank You guys for support, and sorry Chris for confusion. Starting from my next order I will be more precise!
Once again thank You, all problems in this topic are solved !!!

Posted 1 year ago #
Dude
Dude

Glad that the problem is solved now :)

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.

Kriesi.at - Wordpress Themes and HTML Templates

How to change header background area to custom file only?

Reply

Support Forum usage - Please read

Check out some of our WordPress Themes

Blog Categories

Latest Themes

Pages

About me…