Home page - bullet points and image

Discussion in 'Dzonia WordPress Theme' started by james_dg, Sep 6, 2013.

  1. james_dg

    james_dg New Member

    Joined:
    Sep 1, 2013
    Messages:
    15
    Likes Received:
    0
    Hi guys,

    A few questions regarding my home page of my website www.infinitummobile.com
    • How can I change the bullet points in the first feature section and use images instead of bulletpoints, or the + signs as I have used now in the second feature content.
    • How can I insert a centered image below the dotted lines? I have deactivated featured_content .column-three.sub, but I've created some extra space after the dotted lines in order to place an image.
    Thanks in advance!
     
  2. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello,

    1. For your first issue,
    Firstly upload the plus symbol image of small size in your dashboard from the media panel and then copy its URL address.

    And the paste the following code in your Custom CSS
    (Appearance -> Theme Options -> Styling Options -> Custom CSS)

    Code:
    .col3 .inner_area li {
    list-style-type: none;
    list-style-image: url( your plus image URL address here);
    }
    This will solve your issue.

    2. Put the code given below in that section where you want to display image.
    Code:
    <img src="Paste the URL address of your image">
    For more detail
    http://www.w3schools.com/tags/tag_img.asp

    I hope this will help you.
     
  3. james_dg

    james_dg New Member

    Joined:
    Sep 1, 2013
    Messages:
    15
    Likes Received:
    0
    Hi Piyush,

    Thanks for your reply.

    1. I would like to add a different image for each bullet point. How would I do this?
    2. Where do I need to add the code? Like mentioned, if I want to insert a centered image below the dotted lines on my homepage. What do I need to do?
    Do I need to add the code to the stylesheet, or the frontpage.php? Since I've deactivated the featured column, column three with this code .featured_content .column-three.sub {
    display: none;
    }

    Thanks.

    James.
     
  4. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello,

    1. For the first issue,
    you need to create separate class or id for each <li> tag with in the <ul> tag having their separate class or id and style <ul> and <li> tag individually.

    For example:
    Put the code given below for the First column in the First Feature Content section of your dashbaord
    <ul class="first_column">
    <li class="first">Enter the content of your first list </li>
    <li class="second">Enter the content of your second list</li>
    .
    .
    <li class="nth">Enter the content of your nth list </li>
    </ul>

    Now, style them individually by putting the code in the Custom CSS section of your dashbaord

    Code:
    .col3 .inner_area ul.first_column li.first {
    list-style-type: none;
    list-style-image: url(Enter your First list bullet image URL address here);
    }
     
    .col3 .inner_area ul.first_column li.second{
    list-style-type: none;
    list-style-image: url(Enter your second list bullet image URL address here);
    }
    
    Similarly, do the same process for other columns.



    2. For your second issue,
    Firstly remove the code given below from the Custom CSS.

    Code:
    .featured_content .column-three.sub {
    display: none;
    }
    
    And then go to the Appearance >Theme Options > Homepage Second Feature Section > First Feature Section in your dashboard and
    paste the image code in the First Feature Section.

    Code:
    <img src="Paste the URL address of your image">
    And then paste the code given below in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS

    Code:
    .testimonial_holder {
    display: none;
    }
    .featured_content .column-three.sub .last_featureimg {
    display: none;
    }
    .featured_content .column-three.sub .col3 {
    width: 100%;
    text-align: center;
    }
    This will solve your issue.
     
  5. james_dg

    james_dg New Member

    Joined:
    Sep 1, 2013
    Messages:
    15
    Likes Received:
    0
    Many thanks again! Regarding my first issue. I've managed to use my prefered images as bullet points, however they are not well positioned next to the text. How can I position the (bulletpoint) images in such a way that they'll appear correctly left-centered from the text (independent of the number of phrases)?

    Furthermore, how can I exclude one or more of the images in the homepage first feature section? I would like to keep on of them (in the case the first feature image).

    Cheers,

    James.
     
  6. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
  7. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
  8. james_dg

    james_dg New Member

    Joined:
    Sep 1, 2013
    Messages:
    15
    Likes Received:
    0
    Piyush,

    Thanks for the support until now. I'm nearly done with my website but need to finish just a few things which I can't seem to work.
    I've created my website in 4 languages:

    1. Dutch: infinitummobile.com (the main page)
    2. English: en.infinitummobile.com
    3. Spanish: es.infinitummobile.com
    4. Portuguese: pt.infinitummobile.com

    1. Bulletpoints: Dutch.
    As mentioned in the beginning of the thread I was facing some difficulties with the bulletpoints and you helped me out! :)
    However, regarding the page http://www.infinitummobile.com/mobiele-website-functies/ you missed out on one of the bulletpoints.
    I've tried to add the missing bulletpoint + text but now the order got messed up. Could you please help me out with this?

    2. Bulletpoints: other languages
    On the pages whymobile, why infinitum mobile, and features don't seem to work on the English, Spanish, and Portuguese version.
    It does work on the original main page, apart from the page as mentioned above. It's also working fine on the homepages of all languages.

    3. Read more link
    I've used the CSS code in style in order to deactive the "read more" link because it can't be adjusted to the other languages.
    I worked around it, creating my own read more variant - adding some text and using a link.
    Strange enough, although having used the "display: none" option, it is still displayed in Spanish and Portuguese version.
    The Dutch and English version don't display it anymore - having used exact the same code though.

    4. Multisite language switcher
    Like mentioned I've written my pages in languages and I installed the Multi Language Switcher plugin in order to have a multilingual site.
    I would like to show the flags in the (1) header (just above the menu buttons FAQ and contact) and footer (lower left corner)

    I tried to use the following codes to get it going, without any luck:
    Header
    <div id="language">
    <?php if ( function_exists( 'the_msls' ) ) the_msls(); ?>
    </div>

    CSS stylesheet
    #language { position:absolute; top:34px; right:7px; }
    #language a { margin-left:5px; }

    Please help me with the use above.

    Thanks (hopefully for the last time)

    James.
     
  9. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
  10. Nitesh

    Nitesh Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    5,165
    Likes Received:
    160
  11. james_dg

    james_dg New Member

    Joined:
    Sep 1, 2013
    Messages:
    15
    Likes Received:
    0
    Thanks for the support and the advise. I managed to work it out.

    4. Multisite language switcher
    Nevertheless, the last and most important issue has not yet been resolved.

    How and where do I integretate the plugin code in both (just above the menu buttons FAQ and contact) and footer (lower left corner )in order to get it working?
    being a custom the the normal steps don't seem to work.

    Cheers!

    James.
     
  12. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
  13. james_dg

    james_dg New Member

    Joined:
    Sep 1, 2013
    Messages:
    15
    Likes Received:
    0
    Piyush,

    As described above. That's what I've tried messing up the whole theme.
    As asked above, how and where do I insert it?

    Thanks.

    James.
     
  14. james_dg

    james_dg New Member

    Joined:
    Sep 1, 2013
    Messages:
    15
    Likes Received:
    0
    In order to get it just above the menu buttons FAQ and contact (header) and the lower left corner (footer).
     
  15. Nitesh

    Nitesh Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    5,165
    Likes Received:
    160
    Hello,

    Unfortunately there isn't a way to do that with our theme unless you custom code something up in the header.php and footer.php files. Sorry.
    If you are not comfortable in doing it. Then you can call a freelancer for it.
     

Share This Page