easily oversized for the theme studio

How i should control over my display.

Especially the 3 Feature that tends to overlap??? Thanks

  • Kasia Swiderska

    Hello pole915,

    Images are overlapping because this theme is not resizing them in this place - you can change it by using following CSS or uploading images with exact sizes as columns.

    #content-blocks img {max-width: 100%;}

    If you want to link images also, you would need to change this file /library/components/feature-content.php in the theme, so this part of code

    <div class="content-block"><!-- start feature first block -->
    		<h4><?php echo stripslashes($feature_blockone_header); ?></h4>
    		<p>
    			<?php if ($feature_blockone_image != ""){
    				$img = '<img src="'.$feature_blockone_image.'" alt="'.$feature_blockone_image_title.'" class="alignleft"/>';
    				echo $feature_blockone_link_title == '' ? $img : '<a href="'.$feature_blockone_link.'" title="'.$feature_blockone_link_title.'">'.$img.'</a>';
    			} ?>
    			<?php echo stripslashes($feature_blockone_description); ?>
    		</p>
    		<?php if ($feature_blockone_link_title != ""){ ?>
    			<a href="<?php echo $feature_blockone_link; ?>" rel="bookmark" title="<?php echo $feature_blockone_link_title; ?>" class="button"><?php echo $feature_blockone_link_title; ?></a>
    		<?php } ?>
    	</div>

    looks like this:

    <div class="content-block"><!-- start feature first block -->
    		<h4><?php echo stripslashes($feature_blockone_header); ?></h4>
    		<p>
    		<?php if ($feature_blockone_link_title != ""){ ?>
    		<a href="<?php echo $feature_blockone_link; ?>" rel="bookmark" title="<?php echo $feature_blockone_link_title; ?>" >
    		<?php } ?>
    			<?php if ($feature_blockone_image != ""){
    				$img = '<img src="'.$feature_blockone_image.'" alt="'.$feature_blockone_image_title.'" class="alignleft"/>';
    				echo $feature_blockone_link_title == '' ? $img : '<a href="'.$feature_blockone_link.'" title="'.$feature_blockone_link_title.'">'.$img.'</a>';
    			} ?>
    		<?php if ($feature_blockone_link_title != ""){ ?>
    		</a><br>
    		<?php } ?>
    			<?php echo stripslashes($feature_blockone_description); ?>
    		</p>
    		<?php if ($feature_blockone_link_title != ""){ ?>
    			<a href="<?php echo $feature_blockone_link; ?>" rel="bookmark" title="<?php echo $feature_blockone_link_title; ?>" class="button"><?php echo $feature_blockone_link_title; ?></a>
    		<?php } ?>
    	</div>

    Kind regards,
    Kasia

  • pole915

    Hi Kasia,

    Thanks for fast reply.

    i) #content-blocks img {max-width: 100%;}
    It works for PC browser and mobile browser of Browser & UC Browser. However, it is not working with mobile Chrome, please find attached.
    Please provide best resolution for "feature" as well.

    ii) I am having the same problem for slide. As you can see the 4th slide is also oversize. Please provide the target id as well as the best resolution for slide.

    iii) How to get rid of "Hello" & "Our Community" right above the slide? I suppose id="toppanel"

    iv) How to edit color for id= "header wrapper" & its size? And how to remove it if i don't want it?

    v) Basically i see there are too much white space at the bottom part of slide, the buttons are okay. But some extra white space should be remove.

    vi) contact at the footer is not align properly for Subject , From, Message. Can that be aligned too?

    vii) i am not sure if i understand the both codes you pasted in the reply above,
    where to locate them? The 1st is to be detected and the 2nd is to replace the first?
    Even after that how i insert the link for each feature?

    Sorry as i need to ask a lot, simply css and theme is really not my thing. Thanks

  • Kasia Swiderska

    Hello pole915,

    It works for PC browser and mobile browser of Browser & UC Browser. However, it is not working with mobile Chrome, please find attached.

    I've checked this on my mobile Chrome and it is working. Please see attached screens.

    Please provide best resolution for "feature" as well.

    Because images there don't resize you need to upload them in exact size they need to be in those columns (its about 280px to 158px).

    ii) I am having the same problem for slide. As you can see the 4th slide is also oversize.

    Images should be 960px to 310px to fit into the slider. Or you could use this CSS code:

    .slide img {max-height: 310px;}

    iii) How to get rid of "Hello" & "Our Community" right above the slide? I suppose id="toppanel"

    Yes, you can hide it with:

    #toppanel {display: none;}

    iv) How to edit color for id= "header wrapper" & its size? And how to remove it if i don't want it?

    Color change:

    #header-wrapper {
        background: red;
    }

    Size:

    #header-wrapper {
    height: 500px;
    }

    v) Basically i see there are too much white space at the bottom part of slide, the buttons are okay. But some extra white space should be remove.

    This is because your images are too small - they need to be 310px high.

    vi) contact at the footer is not align properly for Subject , From, Message. Can that be aligned too?

    You can use this CSS

    .content-block #form-fields label {width: 55px;}

    vii) i am not sure if i understand the both codes you pasted in the reply above,
    where to locate them? The 1st is to be detected and the 2nd is to replace the first?

    Code is in this file: wp-content/themes/studio/library/components/feature-content.php
    Replace whole content of the file with this code http://pastebin.com/wAa13we7 - I'm giving you all the code, because I didn't noticed earlier, that first code will work only for the first column.

    Even after that how i insert the link for each feature?

    Link will be taken from the Theme Settings -> Feature - from "block link" filelds.

    Kind regards,
    Kasia

  • Rupok

    Hi pole915

    I hope you had a wonderful day.

    To remove that black background, please use the following custom CSS Code.

    #header-wrapper {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
    }

    If you want to completely remove it, then use this custom CSS Code:

    #header-wrapper {
        display: none;
    }

    There are lots of plugins for using custom CSS Code. If you want my suggestion, I'll suggest you to use "Simple Custom CSS" as it has 200000+ active installations.

    About putting links in the pictures, I could give you instructions with screenshots if I could login. Would you mind allowing support access so we can have a closer look at this?
    To enable support access you can follow this guide here:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Have a nice day. Cheers!
    Rupok

  • Rupok

    Hi pole915

    The three images you are referring to, belong to "Feature" section in your Theme Options. I just logged in with Support Access and found that you have successfully created 3 featured boxes.

    For adding links to those feature boxes, you have given the URL to be linked. But as the theme requires, you didn't provide the link title. That's why the links were not showing. I've added some link title in site and you can see them in action. You can easily change them from your Theme Options > Feature page.

    Have a nice day. Cheers!
    Rupok