Creating Graphics

Discussion in 'ClassiCraft WordPress Theme' started by parksarezoosfortrees, Mar 26, 2014.

  1. parksarezoosfortrees

    parksarezoosfortrees Member

    Joined:
    Mar 3, 2014
    Messages:
    107
    Likes Received:
    0
    Hi. I love this theme but I have a question. I have included a screen shot. Is it possible for me to add graphics / words / content in the blank space in between my image of "the diamond" and "post your ideas" ??

    There is a white area with no content there. Can I add content there? If so, how?

    If not…. WHERE do you recommend that I can add content that explains the focus of my site?

    I am not using this for a different purpose than a classifieds site. I would like to explain this somewhere on the HOME PAGE……. preferably in the white space in-between the "diamond" and "post your ideas"
     

    Attached Files:

  2. parksarezoosfortrees

    parksarezoosfortrees Member

    Joined:
    Mar 3, 2014
    Messages:
    107
    Likes Received:
    0
  3. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    Go to header.php present in your theme directory and add the code given below

    Code:
     <div class="grid_6">
    <p>ADD YOUR CONTENT HERE</p>
    </div>
    check image for reference

    2014-03-27_1318.png



    Thanks & Regards
    Gourav Shrivastava
     
  4. parksarezoosfortrees

    parksarezoosfortrees Member

    Joined:
    Mar 3, 2014
    Messages:
    107
    Likes Received:
    0
    Where it says "add content here"……… **how many letters or characters can I write there? I do not want to break button.

    **2A Also, can I put a graphics banner there or words only? If I can put a banner…. be specific. What size / dimensions? Also, can I increase the space if I delete the logo?

    **2B If yes… if deleting the logo increases the space… then same question. How many letters / characters can I type? If I can include a graphic banner…. what size dimension (with deleting the logo)
     
  5. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    After the above customization your header is divided in three parts.
    Width of the first part is 390px
    Width of the second part is 230px
    Width of the third part is 310px

    There is no limit of adding text there.



    Thanks & Regards
    Gourav Shrivastava
     
  6. parksarezoosfortrees

    parksarezoosfortrees Member

    Joined:
    Mar 3, 2014
    Messages:
    107
    Likes Received:
    0
    Thank you. Is it possible to change the size or color of the font? If yes… how do I change the size and color?

    Thanks again
     
  7. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    Could you please explain your problem with the help of screenshot, where you want to change the color and size of font and also share the link of your website, so that we can give you the exact solution.


    Thanks & Regards
    Gourav Shrivastava
     
  8. parksarezoosfortrees

    parksarezoosfortrees Member

    Joined:
    Mar 3, 2014
    Messages:
    107
    Likes Received:
    0
    Here is a link to the site. I have attached a screen shot. My question is about "ADD YOUR CONTENT HERE"

    1. How big can those letters be? Can I change the SIZE and COLOR or FONT IF yes…. what can be customized and how do I do this?

    2. If I delete the diamond image…. will this increase the usable space / amount of letters that I can display? Does deleting the LOGO allow me to add more words / letters / characters?

    3. Can I add a graphic banner like a Photoshop File in this area instead of only words?

    4. Any other recommendations that you have. I need space to explain what the focus of the site it. I am not using this as a classifieds website.

    Thank you screeny.png
     
  9. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    1.
    Paste this code in Custom CSS
    Settings > Theme Option > Styling Option > Custom CSS

    Code:
    .header p {
    color: red;
    font-size: 20px;
    } 
    Adjust font size as per your requirements.

    2. There is no limit of adding text in that area, But if you want to delete the logo area then it will provide you more space for adding your contents.

    3. Yes, you can use banner.
    Just add the code given below in that area
    Code:
    <img src="ENTER YOUR IMAGE ADDRESS HERE"/> 
    check link for reference
    http://www.w3schools.com/html/html_images.asp

    4. You can also use footer widget area for adding your content.



    Thanks & Regards
    Gourav Shrivastava
     
  10. parksarezoosfortrees

    parksarezoosfortrees Member

    Joined:
    Mar 3, 2014
    Messages:
    107
    Likes Received:
    0
    Thank you. This is beautiful information. I think the last 2 questions.

    1. Can I use Google Fonts? If not, what fonts can I use?

    2. Can I change the color of the font? If yes…. how? What colors can I choose?
     
  11. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
  12. parksarezoosfortrees

    parksarezoosfortrees Member

    Joined:
    Mar 3, 2014
    Messages:
    107
    Likes Received:
    0
    I am having trouble getting the google font to work.

    I am trying to make the fonts on the earthpossible DOT com website into a Google font called Lobster. I went to google fonts and got this code for lobster: <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

    I entered the above code into the CSS.style file located in this path: earthpossible.com/wp/wp-content/themes/classicrafttheme/style.css

    The following is the code in the file so that you can see it.

    /*
    Theme Name: ClassiCraft Theme
    Theme URI: http://www.inkthemes.com/wp-themes/classicraft-classified-wordpress-theme/
    Description: Classicraft is a Classified Ads WordPress Theme by InkThemes. Just with in few Simple Steps you can have your own classified site. The Theme is highly customizable and with the presence of several background patterns and Theme Options, You can have your own branded new Website for your Business or Personal Use in Minutes. Features Templates for Blogs, Fullwidth Page without sidebar and Contact Us Page.
    Author: InkThemes.com
    Author URI: http://www.inkthemes.com
    Version: 1.1.4
    Tags: black, blue, white, two-columns, fixed-width, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu
    */

    /*
    WARNING! DO NOT EDIT THIS FILE!

    To make it easy to update your theme, you should not edit the styles in this file. Instead use
    the custom.css file to add your styles. You can copy a style from this file and paste it in
    custom.css and it will override the style in this file. You have been warned! :)
    */
    @import url(css/960_24_col_responsive.css);
    @import url(css/reset.css);
    @import url(<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>);


    What am I doing wrong. Can you please help me to get this Google font to work. Am I putting the code into the wrong file? Or doing something else wrong?
     
  13. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    Just replace your current code with code given below in style.css file
    Code:
     @import url(http://fonts.googleapis.com/css?family=Lobster);
    This will solve your issue.

    Thanks & Regards
    Gourav Shrivastava
     
  14. parksarezoosfortrees

    parksarezoosfortrees Member

    Joined:
    Mar 3, 2014
    Messages:
    107
    Likes Received:
    0
    I am trying to change the font to Lobster and I did exactly what you said and it Didn't Work. What am I doing wrong? Can you please help me to get this Google font to work. Am I putting the code into the wrong file? Or doing something else wrong?

    I entered the above code into the CSS.style file located in this path: earthpossible.com/wp/wp-content/themes/classicrafttheme/style.css
    The following is the code in the file so that you can see it.

    Theme Name: ClassiCraft Theme
    Theme URI: http://www.inkthemes.com/wp-themes/classicraft-classified-wordpress-theme/
    Description: Classicraft is a Classified Ads WordPress Theme by InkThemes. Just with in few Simple Steps you can have your own classified site. The Theme is highly customizable and with the presence of several background patterns and Theme Options, You can have your own branded new Website for your Business or Personal Use in Minutes. Features Templates for Blogs, Fullwidth Page without sidebar and Contact Us Page.
    Author: InkThemes.com
    Author URI: http://www.inkthemes.com
    Version: 1.1.4
    Tags: black, blue, white, two-columns, fixed-width, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu
    */

    /*
    WARNING! DO NOT EDIT THIS FILE!

    To make it easy to update your theme, you should not edit the styles in this file. Instead use
    the custom.css file to add your styles. You can copy a style from this file and paste it in
    custom.css and it will override the style in this file. You have been warned! :)
    */
    @import url(css/960_24_col_responsive.css);
    @import url(css/reset.css);
    @import url(http://fonts.googleapis.com/css?family=Lobster);


    What am I doing wrong. Can you please help me to get this Google font to work. Am I putting the code into the wrong file? Or doing something else wrong?
    Are you sure this is the file that I am supposed to update? Because at the top of the file it says WARNING! DO NOT EDIT THIS FILE! Is there a different file that I should be updating instead to get this google font to work?
     
  15. parksarezoosfortrees

    parksarezoosfortrees Member

    Joined:
    Mar 3, 2014
    Messages:
    107
    Likes Received:
    0
    To use the google font your directions are to edit the CSS.style file. However in the CSS.style file it says the following:

    WARNING! DO NOT EDIT THIS FILE!

    To make it easy to update your theme, you should not edit the styles in this file. Instead use
    the custom.css file to add your styles. You can copy a style from this file and paste it in
    custom.css and it will override the style in this file. You have been warned!


    My question is why are you telling me to edit the CSS.style file if the CSS.style file has a warning not to edit it and to edit the custom.css file

    Where is the custom.css file? and how do I edit the custom.css file?

    Can anyone at you compnay please help me to get the google font to work. This earth possible website can help to change the world if we can just get it to work. Please help.
     
  16. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    Paste this code in Custom CSS
    Settings > Theme Option > Styling Option > Custom CSS

    Code:
     h1, h2, h3, h4, h5, h6, p, a{
    font-family: lobster!important;
    }

    This will solve your issue.


    Thanks & Regards
    Gourav Shrivastava
     
  17. parksarezoosfortrees

    parksarezoosfortrees Member

    Joined:
    Mar 3, 2014
    Messages:
    107
    Likes Received:
    0
    I tried this but it didn't work. I placed this code into Custom CSS
    Settings > Theme Option > Styling Option > Custom CSS

    h1, h2, h3, h4, h5, h6, p, a{
    font-family: lobster!important;
    }

    The fonts have not change to Lobster. The fonts are still the same original fonts.
    Do you know if there is anything else that we can try to get the google fonts to work?
    If we can just get this to work then the earthpossible.com website could change the world by bringing together positive ideas.
     
  18. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    Go to Settings > Theme Option > Styling Option > Custom CSS
    and remove the code given below from there.
    Code:
    <img src="http://earthpossible.com/images/banner+website1.jpg"/>
    
    This will solve your issue.


    Thanks & Regards
    Gourav Shrivastava
     
  19. parksarezoosfortrees

    parksarezoosfortrees Member

    Joined:
    Mar 3, 2014
    Messages:
    107
    Likes Received:
    0
    Yes this worked. Now the entire text is lobster.

    Is there a way to make on the header into another font where it says " Have an idea that can change the world? Post it on Earth Possible!"

    Can I make on this header into two different fonts. The first few words would be in one font "Have an idea that can change the world?" and the second half of the sentence in another font Post it on Earth Possible!?
     
  20. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    For this, go to header.php and replace the current code
    Code:
    <p>Have an idea that can change the world?  Post it on Earth Possible! </p> 
    code given below

    Code:
     <p style="font-family:lobster;">Have an idea that can change the world?</p><p style="font-family:arial;">Post it on Earth Possible! </p>

    This will solve your issue.


    Thanks & Regards
    Gourav Shrivastava
     
    parksarezoosfortrees likes this.

Share This Page