Child theme for hr image, add favicon, change search layout, highlight parent « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Flashlight

closed

resolved

Child theme for hr image, add favicon, change search layout, highlight parent

8 posts from 2 voices

Started 3 months ago by softwaresforce
Latest reply from Nick
This topic is closed
This topic is resolved

Tags:

softwaresforce
Member

Hello,

I've created a child theme for change hr.png image, add favicon, change the search layout and highlight the menu parent in a red rectangle folder structure is: https://docs.google.com/file/d/0B7btbRiQph9WM3E3TjJBdk55Nmc/edit?usp=sharing

1. Change the hr.png image in child theme style.css: https://docs.google.com/file/d/0B7btbRiQph9WTFlaRGd3T1BZUlU/edit?usp=sharing
I don't know why but minimal-skin.css still loading after my child theme style and hr.png doesn't change

2. Add favicon: I've copied header.php and works

3. Change search layout: I've created loop-search.ph but can you point me how to make search to appear as the portafolio layout?

4. Highlight menu parent in a red rectangle: What and where should I make the changes to make the selected menu to have red background instead of only red letters?

The stage site is http://wp.vasquezvillegasfotografia.com/

Thanks in advance.
Alejandro.

Posted 3 months ago #
Nick
Moderator
Hi,

I will go out of order with the css here.

4. red rectangle

There are 2 ways to do it. First way makes a smaller rectangle and the second one makes a bit of a larger one. Just don't use them both simultaneously.
```
#top .main_menu .menu .current-menu-item a strong {
color: #ac0101;
border:1px solid;
}
```
larger rectangle
```
#top .main_menu .menu .current-menu-item {
color: #ac0101;
border:1px solid;
}
```
3. search in portfolio
I am assuming you mean that you want the search box on the portfolio page ( http://www.wp.vasquezvillegasfotografia.com/?page_id=27 ) to search only the portfolios? You should look at this plugin http://wordpress.org/extend/plugins/relevanssi/ which is for customizing your search.

2., I am not sure if you are asking a question or already solved the issue.

1,. hr.png

That image is used in the parent css file minimal-skin.css and shortcodes.css

minimal-skin
```
#top .post-title.big_title {
background: transparent url(../images/skin-minimal/hr.png) no-repeat bottom center;
}
```
and shortcodes
```
.hr{
clear: both;
display:block;
overflow: hidden;
width:100%;
padding:40px 0;
line-height:29px;
position: relative;
height:20px;
background: transparent url(../images/skin-minimal/hr.png) no-repeat center center;
}
```
so you would need to add to the *child style.css file* after the initial import statement
```
#top .post-title.big_title {
background: transparent url(/images/skin-minimal/hr.png) no-repeat bottom center !important;
}
#top .hr{
background: transparent url(/images/skin-minimal/hr.png) no-repeat center center !important;
}
```
Thanks,

Nick
Posted 3 months ago #
softwaresforce
Member

Nick,

Thanks for your prompt answer.

I will try everything, for the question 1 I needed just to add the !important.

In regard of the question 3 I have already relevanssi, but what I want is to change the layout of the search result page, in the main theme the search.php file says that if you want to change the loop, make a file in your child theme call loop-search.php. I have the file, but my question is if I can get some lights on how to make the loop to present the search results as the shop overview page http://www.wp.vasquezvillegasfotografia.com/?post_type=product, so if a product match the search criteria you can see the photo, to explain further I want my search result page to be 3 columns layout with photo thumbnails and when you clic the photo you go to the product page.

Thank in advance.

Regards,
Alejandro

Posted 3 months ago #
Nick
Moderator

Hi,

q1) No. For point one you also need to change the URL:. if you compare what i pasted above to the css in the parent theme carefully, you will notice another difference besides !important. One uses ../ and the other uses / to start the url.

You have to remember that the url of the image is relative to the location of the css file that is calling that image. Since the child theme style.css file is at the base of the theme it doesn't need to go up a folder (../) as in the parent theme where the css file that calls the image is not in the root folder but elsewhere.

-----
Just FYI, the easiest way to discover where an image or css class is used in the theme, is for you to install the free notepad++ (google it). Then you unzip the theme somewhere on your home computer, and notepad++ can search the entire theme folder thereby instantly letting you see which image/class/word is used in what templates.

-----

q2) Ok I understand now. You will need to hire a freelance developer to do something like this. It is possible ofcourse but would require for you to recode the page to display the search results from products only in the 3 column format similar to the format of the main store page. But in my opinion this is outside the scope of the support team.

Thanks,

Nick

Posted 3 months ago #
softwaresforce
Member

Hi Nick,

Thanks for your responses!

Q1) I've already had the url in the right way, it's now working on the site, the only thing I needed was the !important.

Q2) I'm a developer, but this is my first time with woocommerce so I want to be pointed in some direction like maybe see some file in the woocommerce plugin, or in the theme, I will look for woocommerce documentation to understand how the 3 column work for the shop and do that in the search. Just to know in which file do you have the code for the 3 columns layout for the galleries in Flashlight? maybe I can use that code as example.

Regards,
Alejandro

Posted 3 months ago #
Nick
Moderator

Hi,

This is the reason why you will need to hire a programmer because based on the type of question you are asking you will have a hard time. Please install notepad++ and unzip the theme on your home computer. then using notepad++ search for the css selector and bits of html code that you see in firebug or chrome developer tools is the markup for the layout and you will find the page they are on. (inside the theme folder /woocommerce-config/config.php line 240-80...)

Thanks,

Nick

Posted 3 months ago #
softwaresforce
Member

Hi Nick,

Thanks for all your help, I've done it, but after reviewing the lines you suggest and the loops templates from the theme I decided to copy the loop-portfolio.php as loop-search.php and remove the $args and $categories. For the search.php I replaced the template-blog-overview template-archive-overview template-blog classes with template-portfolio-overview content portfolio-size-<?php echo $avia_config['portfolio_columns']; and now it works as needed.

Here is the link in case you want to see the result: http://www.wp.vasquezvillegasfotografia.com/?s=prueba

Thanks again for all your help!

Regards,
Alejandro.

Posted 3 months ago #
Nick
Moderator

Hi,

I stand corrected. A really nice solution. Thinking outside the box!

Thanks,

Nick

Posted 3 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top