Hi writershrink

I’m very sorry for this late. You seem don’t have enough HTML experience. The best selection for such your case to go to the Wordpress category and getting the template you like. In the Wordpress category, you almost don’t need any code experience to deal with a Wordpress theme, because you just deal with windows to get the content you like. So i suggest you if you want a new website for you to go to the Wordpress category here and pick your preferred template, you will find there unbelievable and beautiful design that i’m sure you will like.

But anyway, contact me throw my profile page to help you with your request if you still didn’t fixed it !

I did indeed fix it, so no! I won’t be buying a wordpress theme! LOL. Seriously, I love your template. And it is true I am very new to HTML but I kinda knew that going in.

I fixed the navigation menu on the home page, but now there is a red strip across the very top! The other pages don’t have this. Only index.html and index2.html. How do I fix it?

Editing is going very well aside from the above question. I have one more (for now). How can I alter the background colour and texture options for different pages?

High maintanence, I know. =P

Hi writershrink

The documentation is containing what you are asking for. But to quickly make the changes you want, just go to css_structure_and_styles_imports.css and you will find a map to the styles options included in the theme and how to choose and change between them, you will not need to deal with CSS codes, you will just change a number to transform between styles included in the template.

For example, to choose between the 20 ready made skins, go to IMPORTS PART and change the number from 1 to 20 to change between the 20 skins as following:

/* ------------------------ IMPORTS PART ------------------------ */

.
.
.
.

/* SAMPLES_SKINS_OPTIONS */
@import url("skins/skin2.css");

.
.
.
.

and also the same idea for other styles. But for changing between the spot effects, i forgot to add the ability to change between them using the same idea of just changing a number, without dealing with any codes. I will soon include this option soon. But to change between them you can add these codes in custom_separated_css_file_for_custom_specific_optimizations.css file

For Spot Effect 1

#header_container {
    background: url("../images/spot_effects/1.png") no-repeat center top;
}

For Spot Effect 2

#header_container {
    background: url("../images/spot_effects/2.png") no-repeat center top;
}

For Spot Effect 3

#header_container {
    background: url("../images/spot_effects/3.png") no-repeat center top;
}

For Spot Effect 4

#header_container {
    background: url("../images/spot_effects/4.png") no-repeat center top;
}

For Spot Effect 5

#header_container {
    background: url("../images/spot_effects/5.png") no-repeat center top;
}

For Spot Effect 6

#header_container {
    background: url("../images/spot_effects/6.png") no-repeat center top;
}

Finally, for more details about styling, go to documentation and explore more details under CSS Files and Structure

I hope that i made a clearance for you

Thanks

Hi kgc1986

I’m very sorry for this late! , i was disconnected from work for about a continued 20 days, so i’m so sorry for that.

Which ie problems you are talking about ? , i searched before as possible for ie issues and i fixed them for ie7 and ie8. Waiting your reply

Last, i hope your accept my apologizes, this was out of my hand.

Greetings

Hi cturner24fps

I’m very sorry for this late! , i was disconnected from work for about a continued 20 days, so i’m so sorry for that.

In fact, i didn’t understand. You are talking about font issue, but i couldn’t understand, may be due to badness in my English , Sorry !

Last, i hope your accept my apologizes, this was out of my hand.

Greetings

Hi cturner24fps

I’m very sorry for this late ! , it was out of my hand.

Yes, you can do that. But you have to change the dimensions of portfolio images used to prevent using the space that will be replaced with the grid pattern effect as a space between each portfolio item, so you will need to change the height and width of portfolio item images for both the 2 type of portfolio, that’s to be looking normal.

Open custom_separated_css_file_for_custom_specific_optimizations.css and paste this css code. You will just paste this code in that file to keep the default settings as it’s existed in the style.css file.

/*portfolio item settings*/

.portfolio_item {
    padding: 0;
    width: 225px;
    height: 174px;    
}

.boxgrid {
    width: 225px;
    height: 174px;
    background: #fcfcfc;
    -moz-box-shadow: 0 0 2px #ccc inset;    
}

.boxgrid img {
    width: 225px;
    height: 174px;    
}

div.image_box, div.image_box_one_third, div.image_box_one_fourth, div.image_box_one_half, div.image_box_two_third, div.image_box_two_third {
    padding: 0px;
    background: #FFFFFF;
}

div.image_box_one_third img {
    height: 206px;
    width: 306px;
}
div.image_box_one_fourth img {
    height: 154px;
    width: 225px;
}
div.image_box_one_half img {
    height: 413px;
    width: 470px;
}
div.image_box_two_third img {
    height: 420px;
    width: 634px;
}

/*single portfolio settings*/

.single_portfolio_nivoslider_wrapper {
    padding: 0;
    background: none;    
}

.single_portfolio_nivoslider {
    height: 350px;
    width: 634px;
}

.single_portfolio_nivoslider_fullwidth_wrapper {
    padding: 0;
    background: none;    
}

.single_portfolio_nivoslider_fullwidth {
    height: 380px;
    width: 960px;
}

You will need to re-size you first portfolio images to width: 225px and height: 174px, this is for the case of the first portfolio style

Also open custom.js file and change the part of Portfolio Items Sliding Box by the following:

// -------------------------------------------------------------------------------------------
// Portfolio Items Sliding Box
// -------------------------------------------------------------------------------------------

    $(document).ready(function(){
        //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
        //Vertical Sliding
        $('.boxgrid.slidedown').hover(function(){
            $(".cover", this).stop().animate({top:'-174px'},{queue:false,duration:500, easing: 'easeInOutExpo'});
        }, function() {
            $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:500, easing: 'easeInOutExpo'});
        });
        $('.boxgrid.slideup').hover(function(){
            $(".cover", this).stop().animate({top:'174px'},{queue:false,duration:500, easing: 'easeInOutExpo'});
        }, function() {
            $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:500, easing: 'easeInOutExpo'});
        });
        //Horizontal Sliding
        $('.boxgrid.slideright').hover(function(){
            $(".cover", this).stop().animate({left:'225px'},{queue:false,duration:500, easing: 'easeInOutExpo'});
        }, function() {
            $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:500, easing: 'easeInOutExpo'});
        });
        $('.boxgrid.slideleft').hover(function(){
            $(".cover", this).stop().animate({left:'-225px'},{queue:false,duration:500, easing: 'easeInOutExpo'});
        }, function() {
            $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:500, easing: 'easeInOutExpo'});
        });
        //Diagnal Sliding
        $('.boxgrid.slideangle').hover(function(){
            $(".cover", this).stop().animate({top:'174px', left:'225px'},{queue:false,duration:500, easing: 'easeInOutExpo'});
        }, function() {
            $(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:500, easing: 'easeInOutExpo'});
        });
    });

For the first single portfolio slider, you will need to re-size the images to width: 634px and height: 350px

For the second single portfolio slider, you will need to re-size the images to width: 960px and height: 380px

Last, i apologize for this late and hope you forgive me !

Hi Fluge ,

You mean you want to use only the fade effect for transition between images ? If that, then you can use the fade effect for both of the 2 sliders.

If i didn’t understand, so tell me !

Regards

Hi pallichal

I’m sure want to provide the Wordppess versions of my themes, but i don’t have knowledge about Wordpress developments. But i asked for a developer and he in certainly working on the Wordpress version of one of my item “One Straight Line”, and i’m interested to make the Wordpress version of all my themes, so i will see if he is inrerested with the other themes or i ask another developer to make them, because i want to provide the Wordpress version of them.

Regards

Open colors_and_backgrounds_options.css and you will find the all specifications of the theme styles, take a look at this file and you will understand how to make the changes you want.

If still need more, then i’m ready

Hi fahimc97

For the point of understanding how to change between the styles, you can see in the css_structure_and_styles_imports.css file in css folder that there 2 sections in this file. The first top section is containing information about all css files of different styles separately. And in the down section, there is the part of choosing between the different styles by css import method.

For example, look at the bottom section that containing the imports part of styles as mentioned. Let’s say we wan to change the angle feature of the header, so here is it’s import line in the bottom imports section

/* ------------------------ IMPORTS PART ------------------------ */

.
.
.

/* HEADER ANGLES OPTIONS */
@import url("header_angles_options/header_angle_style1.css"); 

.
.
.

So if you want to change between the 3 styles of header angle feature, then you can go up to the first section which containing the information about the different styles of the theme. So search for the header angles styles options part and you will find the 3 texts contents of the 3 header angles styles css files.

It’s looking like this:

/* 
---------------------------------------------------------------------------------------------------------------------------------
    "CSS FILES" MAP
---------------------------------------------------------------------------------------------------------------------------------

.
.
.

E)    HEADER ANGLES OPTIONS
    1. header_angle_style1.css
    2. header_angle_style2.css
    3. header_angle_style3.css

.
.
.

*/

So if i want to change the style to such as the third style of it, then it will be as following:

/* ------------------------ IMPORTS PART ------------------------ */

.
.
.

/* HEADER ANGLES OPTIONS */
@import url("header_angles_options/header_angle_style3.css"); 

.
.
.

Just changing between 1 to 3. You can also check the styling part in documentation for all other details and styles.

Secondly, for the point of the place of the files of the logo, you will find it in images/general_elements/ call logo.png . You can easly change it’s place as you like, and then refer it though the css code correctly

For any more point or still not clear, then i’m ready in anytime!

Greetings

Hi fahimc97

For the first point: for changing the styles options, it’s very easy and simple, you will just need to change a letter or a word to change between styles, like changing between angles. You will not need to deal with any css for the styles options included in the theme, except if you need to make another specific different change. To take a look on the control file of the styles, just view source and open the only attached css file css_structure_and_styles_imports.css

For the second point: I will show now the folder layout for main file, HTML folder and css folder as following:

Main file

HTML folder

CSS folder

If you have any additional questions, i’m ready for any time!

Thanks, greetings.

Sorry!, previous links not working. They are respectively:

Thank you anariel7

Hi innerclick

Thank you so much for these fantastic words

Good luck!

Hi Chudz

Thank you so much for these kind words. Good luck.

Greetings

Sorry for that, it’s not appearing. Just paste this instead

html {
     background: #DF2828 url("../images/grid_patterns/1.png") repeat top left;
     display: block;
     height: 100%;
     position: relative;
     width: 100%;
}

I combined the background property in a one line to fix this wrong.

Hi knylund

For the first point: I can’t imagine how the change you did fixed the issue, although i think it’s against the solution needed for that. Anyway, great with that if the issue is fixed! . If possible, can you give me a live preview for that issue after you change, may be i didn’t understand the issue with 100%.

For the second point: I reviewed the main file with that .png in it’s directory if it has any problem, and i found it’s ok.

I want to thank you so much for clearing these points, and great to see you.

Greetings

Yes, if you increased the height, the white space will be filled. But i think it will be looking so strange and bad.

But i found a tricky method that could be as an acceptable solution. Paste this css code in custom_separated_css_file_for_custom_specific_optimizations.css in css folder

html {
     background-image: url("../images/grid_patterns/1.png") repeat top left;
     background-color: #DF2828;
     display: block;
     height: 100%;
     position: relative;
     width: 100%;
}

This code will color the white space with the same background color and pattern of the footer, and when the content fill the maximum height resolution of your screen, then that space will be disappeared and the page will look normal.

Take in mind to change the background color and the background pattern of this css code with the same desired styles color and background patterns specification you choose.

Try this and tell me if the result is looking acceptable