Site5

Menu

Support Forums

Veecard theme and I

Home Forums Veecard Veecard theme and I

Tagged: 

This topic contains 20 replies, has 11 voices, and was last updated by  chanyuan 3 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
  • #15320

    DementyevAlx
    Participant

    Hello everyone!
    Today i’ve finished customization works for Veecard theme.
    My aim was to create personal page with resume, my projects list and blog. I’ve try many themes and finally start using Veecard.
    “From the box” this theme not fully suit me and i’ve begun exploring PHP and CSS files included in theme pack. But i don’t have any experience in programming and web-design, but this forum and comments in files helps me so much. Thanks for users who post information about bugfixes !
    Let’s start?
    Part 1. “Home Page”
    This is my home page.
    Home
    As you can see i use some Google fonts(Jura for headings and PT Sans for body) and also i change some information in main.css, footer.php and social.php files to create my own social networks links.
    There is listing:
    **main.css**

    /* ===============
       Social Links
       =============== */
    #social-icons {
      position: absolute;
      bottom: 70px;
      right: -50px;
    }
    #social-links {
      margin:0;
      padding:0;
    }
    #social-links li {
      display: block;
      text-indent: -9999px;
      width: 32px;
      height: 32px;
      margin: 5px;
      padding: 0;
    }
    #social-links li a {
      display: block;
      width: 32px;
      height: 32px;
      border-radius: 25%;
      -moz-border-radius: 25%;
      -webkit-border-radius: 25%;
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
    #social-links li a:hover {
      background-color: transparent;
    }
    
    ul#social-links li  a.vk {  background-image: url("../images/icons/vk.png") }
    ul#social-links li  a.facebook {  background-image: url("../images/icons/facebook.png") }
    ul#social-links li  a.twitter {  background-image: url("../images/icons/twitter.png") }
    ul#social-links li  a.instagram {  background-image: url("../images/icons/instagram.png") }
    ul#social-links li  a.linkedin {  background-image: url("../images/icons/linkedin.png") }
    ul#social-links li  a.steam {  background-image: url("../images/icons/steam.png") }
    ul#social-links li  a.skype{  background-image: url("../images/icons/skype.png") }
    ul#social-links li  a.mail {  background-image: url("../images/icons/mail.png") }
    ul#social-links li  a.rss {  background-image: url("../images/icons/rss.png") }

    **footer.php**

      <!-- begin #socialIcons -->
                        <div id="social-icons" class="clearfix">
                            <ul id="social-links" class="clearfix">
                                <?php if(of_get_option('veecard_vk')!='') : ?>
                                <li class="vk-link"><a href="<?php echo of_get_option('veecard_vk') ?>" class="vk" id="social-01" title="<?php _e( 'Вконтакте', 'site5framework' ); ?>">ВКонтакте</a></li>
                                <?php endif ?>
    			     <?php if(of_get_option('veecard_facebook')!='') : ?>
                                <li class="facebook-link"><a href="<?php echo of_get_option('veecard_facebook') ?>" class="facebook" id="social-02" title="<?php _e( 'Facebook', 'site5framework' ); ?>">Facebook</a></li>
                                <?php endif ?>
    			     <?php if(of_get_option('veecard_twitter')!='') : ?>
                                <li class="twitter-link"><a href="<?php echo of_get_option('veecard_twitter') ?>" class="twitter" id="social-03" title="<?php _e( 'Twitter', 'site5framework' ); ?>">Twitter</a></li>
                                <?php endif ?>
    			     <?php if(of_get_option('veecard_instagram')!='') : ?>
                                <li class="instagram-link"><a href="<?php echo of_get_option('veecard_instagram') ?>" class="instagram" id="social-04" title="<?php _e( 'Instagram', 'site5framework' ); ?>">Instagram</a></li>
                                <?php endif ?>
    			     <?php if(of_get_option('veecard_linkedin')!='') : ?>
                                <li class="linkedin-link"><a href="<?php echo of_get_option('veecard_linkedin') ?>" class="linkedin" id="social-05" title="<?php _e( 'LinkedIn', 'site5framework' ); ?>">LinkedIn</a></li>
                                <?php endif ?>
    			     <?php if(of_get_option('veecard_steam')!='') : ?>
                                <li class="steam-link"><a href="<?php echo of_get_option('veecard_steam') ?>" class="steam" id="social-06" title="<?php _e( 'Steam', 'site5framework' ); ?>">Steam Community</a></li>
                                <?php endif ?>
    			     <?php if(of_get_option('veecard_skype')!='') : ?>
                                <li class="skype-link"><a href="<?php echo of_get_option('veecard_skype') ?>" class="skype" id="social-07" title="<?php _e( 'Skype', 'site5framework' ); ?>">Skype</a></li>
                                <?php endif ?>
    			     <?php if(of_get_option('veecard_mail')!='') : ?>
                                <li class="skype-mail"><a href="<?php echo of_get_option('veecard_mail') ?>" class="mail" id="social-08" title="<?php _e( 'Mail', 'site5framework' ); ?>">Mail</a></li>
                                <?php endif ?>
                                <?php if(of_get_option('veecard_rss')=='1'): ?>
                                    <li class="rss-link"><a href="<?php echo of_get_option('veecard_extrss') ?  of_get_option('sc_extrss') : bloginfo('rss_url'); ?>" id="social-08" title="<?php _e( 'RSS', 'site5framework' ); ?>" class="rss">RSS Feeds</a></li>
                            <?php endif ?>
                            </ul>
                        </div>
                    <!-- end #socialIcons -->

    **social.php**

    <?php
        $options[] = array( "name" => "Social",
        					"sicon" => "social.png",
    						"type" => "heading");
    
        $options[] = array( "name" => "VK Profile",
                            "id" => $shortname."_vk",
                            "std" => "",
                            "type" => "text");
    						
    	$options[] = array( "name" => "Facebook Profile",
                            "id" => $shortname."_facebook",
                            "std" => "",
                            "type" => "text");
    
        $options[] = array( "name" => "Twitter Profile",
                            "id" => $shortname."_twitter",
                            "std" => "",
                            "type" => "text");
    
        $options[] = array( "name" => "Instagram Profile",
                            "id" => $shortname."_instagram",
                            "std" => "",
                            "type" => "text");
    
        $options[] = array( "name" => "LinkedIn Profile",
                            "id" => $shortname."_linkedin",
                            "std" => "",
                            "type" => "text");
    
        $options[] = array( "name" => "Steam Profile",
                            "id" => $shortname."_steam",
                            "std" => "",
                            "type" => "text");
    
        $options[] = array( "name" => "Skype Profile",
                            "id" => $shortname."_skype",
                            "std" => "",
                            "type" => "text");
    
        $options[] = array( "name" => "Mail Address",
                            "id" => $shortname."_mail",
                            "std" => "",
                            "type" => "text");
    
        $options[] = array( "name" => "RSS",
                            "desc" => "Display RSS link",
                            "id" => $shortname."_rss",
                            "std" => "1",
                            "type" => "checkbox");
        $options[] = array( "name" => "External RSS URL",
                            "desc" => "Add external RSS URL, like Feedburner, etc. This will overwrite the regular blog RSS, if enabled.",
                            "id" => $shortname."_extrss",
                            "std" => "",
                            "type" => "text");
    
    ?>
    • This topic was modified 3 years, 11 months ago by  DementyevAlx.
    #15322

    DementyevAlx
    Participant

    Part 2. Resume
    This is my “Resume” page.
    Resume 1
    No changes here. In “About” block i use text encode to HTML for right position and italic font style.
    By the way, when you writing yours job experience use HTML too, then you’ve got nice formatting. For example, i use “h3” and “li” tags.
    Take a look:
    Resume 2
    “Education” and “Skills” blocks. Also use HTML with “p” tag for every string
    Take a look:
    Resume 3
    Resume 4
    Everything is fine here!

    • This reply was modified 3 years, 11 months ago by  DementyevAlx.
    • This reply was modified 3 years, 11 months ago by  DementyevAlx.
    • This reply was modified 3 years, 11 months ago by  DementyevAlx.
    #15326

    DementyevAlx
    Participant

    Part 3. Projects
    Because in my business most important things is practical experience in projects i’ve created this page. To create it i use “Base page template” and “PPM Accordion” plugin. Now visitors can hit “+” symbol and read more about my projects.
    Projects
    Also i made some changes in plugin css file to change accordion font color.
    Here is listing for you:

    #ppm-tabs{font-family:arial;font-size:14px}
    
    #ppm-tabs h2 + div {height: 0px; padding: 0px; overflow: hidden; display: block!important; -webkit-transform: translateZ(0); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition:all 0.3s ease; transition: all 0.3s ease;}
    #ppm-tabs h2.open + div {height: auto; margin-bottom: 20px;}
    #ppm-tabs h2 {border-bottom: 1px solid #DDDDDD; font-size: 14px; font-weight: normal; margin: 0 0 15px; padding: 0 0 15px;line-height:20px}
    #ppm-tabs h2 a{padding: 3px 37px;display:block}
    #ppm-tabs h2 a{color:#ffffff;text-decoration:none;}
    #ppm-tabs h2 a:hover{}
    #ppm-tabs h2 a:focus{outline:none}
    #ppm-tabs h2.open a{background-image:url(minus_icon.png); background-repeat:no-repeat;}
    #ppm-tabs h2.open a:hover, #ppm-tabs h2.close a:hover, #ppm-tabs h2.open a{background-position:0 -26px;}
    
    #ppm-tabs h2.close a{background-image:url(plus_icon.png); background-repeat:no-repeat;}
    #ppm-tabs .tab_content {overflow: hidden; padding: 0 0 0 35px;}

    And in plugin-hook.php:

    /* Generates Toggles Shortcode */
    function ppm_accordion_main($atts, $content = null) {
    	return ('<div id="ppm-tabs">'.do_shortcode($content).'</div>');
    }
    add_shortcode ("ppmaccordion", "ppm_accordion_main");
    
    function ppm_accordion_toggles($atts, $content = null) {
    	extract(shortcode_atts(array(
            'title'      => ''
        ), $atts));
    	
    	return ('<h2>' .$title. '</h2><div><div class="tab_content">' .$content. '</div></div>');
    }
    add_shortcode ("ppmtoggle", "ppm_accordion_toggles");

    Looking great! Don’t you?

    • This reply was modified 3 years, 11 months ago by  DementyevAlx.
    #15328

    DementyevAlx
    Participant

    Part 4. Blog
    As you know, with “Blog template” has some serious errors and how to fix it?
    First of all, listing for blog page(solution finded in this forum)
    Replase ALL code in page-temp-blog.php with this code:

    <?php
    /*
    Template Name: Blog
    */
    get_header(); ?>
    
    		<div class="column-left">
    
    			<h1><?php the_title() ?></h1>
    
    			<?php
    			// WP 3.0 PAGED BUG FIX
    			if ( get_query_var('paged') )
    			$paged = get_query_var('paged');
    			elseif ( get_query_var('page') )
    			$paged = get_query_var('page');
    			else
    			$paged = 1;
    
    			$args = array(
    			'post_type' => 'post',
    			'paged' => $paged );
    
    			query_posts($args);
    			?>
    			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    			<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
    
    				<?php if(has_post_thumbnail()): the_post_thumbnail('thumbnail', array('class'=>'blog-thumb')); ?><?php endif; ?>
    
    				<header>
    					<h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    
    					<div class="meta">
    						<?php echo get_the_date(); ?> | <?php the_category(', '); ?> | <?php _e('by','site5framework') ?> <?php the_author(); ?>
    					</div>
    				</header>
    
    				<?php the_excerpt(); ?>
    
    			</article>
    
    			<?php endwhile; ?>
    
    			<!-- begin #pagination -->
    				<?php if (function_exists("emm_paginate")) {
    						emm_paginate();
    					 } else { ?>
    				<div class="navigation">
    			        <div class="alignleft"><?php next_posts_link('Older') ?></div>
    			        <div class="alignright"><?php previous_posts_link('Newer') ?></div>
    			    </div>
    		    <?php } ?>
    		    <!-- end #pagination -->
    
    			<?php endif;?>
    
    			<?php wp_reset_query(); ?>
    
    		</div>
    
    		<div class="column-right">
    		<?php get_sidebar(); ?>
    		</div>
    
    <?php get_footer(); ?>

    Second, you need to fix “Read more”, use this:

    /*********************************************************************************************
    
    Show "Read More" in Blog
    
    *********************************************************************************************/
       function new_excerpt_more($more) {
       global $post;
       return '… <a href="'. get_permalink($post->ID) . '">' . 'More »' . '</a>';
       }
       add_filter('excerpt_more', 'new_excerpt_more');
    

    And now everthing is fine!
    Blog 1
    Oh, almost forgot use custom CSS to fix error with pictures size on mobile devices.
    Here is listing:

    img {
    	max-width: 100%;
    	height: auto;
    }

    Blog 2

    Solution was finded here.

    • This reply was modified 3 years, 11 months ago by  DementyevAlx.
    #15330

    DementyevAlx
    Participant

    Part 5. Contact page
    In this template nothing to change, use it with standard settings. Don’t forget enter your mail in “Theme settings” ))
    Contact

    #15331

    DementyevAlx
    Participant

    Part 6. About plugins.
    What plugins i use?
    CodeStyling Localization – translation, because i live in Russia my site should be in Russian. Working fine!
    Jetpack – for additional functions, as “Custom CSS”
    PPM Accordion – for accordion on my “Projects” page
    Simple Full Screen Background Image – to fix error with no responsive background in theme
    And some plugins for SEO, Backup and Securityю

    Part 7. The End.

    That’s it! If you take some time to fix errors in this theme then you get really nice website. Thanks for S5Themes and all users on this forum.
    If any questions, so send me a message and i’ll try to reply.

    #15472

    yashwc
    Participant

    how to add resume in navigation menu. I can’t able to find way. can u guide me

    #15806

    gustavomuraro
    Participant

    Hi,

    This post has been helping me a lot. But I have one question, where do I put the code in the main css file for resizing the images?

    I tried several times and didn’t work.

    Can anyone help me with that?

    Thank you.

    Gustavo Muraro

    #15903

    Milo
    Participant

    Hello everybody;

    I am really confused. I made the first Home page perfect but when I tried to add a resume the picture of Martin Smith keeps showing instead of mine. In “Home” I see my picture and also I made the Contact page differently from the one in the demo and coould see also my picture.

    My problem is:

    How to get rid of Martin Smith picture?
    How to make the Resume correctly? for me I went to Resume and Add new. The Bio was already filled in the Theme options homepage part.
    How to make the Contact? I created the Contact form as a page and added a pluging Contact Form 7

    Do we need a plugin for the contact page or?????

    Br

    Milo

    #15904

    gustavomuraro
    Participant

    Hi Milo,

    How are you? So, I’m not an expert with this theme, but I think I can help you.

    – How to get rid of Martin Smith picture?

    You should add your picture in the Featured Image section when creating your resume.
    I think this is going to resolve your problem.

    – How to make the Resume correctly? for me I wen to Resume and Add new. The Bio was already filled in the Theme options homepage part.

    As the creator of this topic suggested, using HTML for “h3”, “li” or “p” tags is good for getting nice text formatting.
    About the Bio, I just deleted all default content and started my own.

    – How to make the Contact? I created the Contact form as a page and added a pluging Contact Form 7

    I also changed the Contact page. I have another WordPress website and I use the Contact Form 7 as well and I never had a problem with this plugin. So, I created a page (with the Default Template) and added the code for the form.

    I hope this helps, if you have any other doubts, feel free to ask.

    And if you want to see my page for inspiration, the link is http://gus.photography, I’m still working on it (and it’s in Portuguese), but you can take ideas from it.

    Cheers.

    Gus

    #15905

    Milo
    Participant

    Hi Gus;

    Thanks for the help. I appreciate it. I like your site.
    You can have a look at mine here: http://www.haireche.co.nf/resume
    Still not DONE. I just started today.

    Have a nice evening

    Milo

    #15907

    Milo
    Participant

    Hi Gus;

    How did you change the shadow border for the page to be light blue?

    Br

    Milo

    #15908

    gustavomuraro
    Participant

    Hi Milo,

    The border it’s not light blue, it’s lightly transparent, my background it’s.

    Cheers

    Gus

    #16016

    khushali.sandhi
    Participant

    Hi I started creating the portfolio using this theme. But, I am not able to add home page. I mean, the log in page is the home page, but I am not able to add a menu for it. In the “Theme options – Menus” there is no home page menu. Any Idea what to do? I tried creating a page, but what template to assign? It does not show me the home page if i add any of the template.

    Thanks in advance.

    #19937

    almasdar
    Participant

    برامج تحميل ، ان البرامج اليوم هى المحرك الأساسى للكمبيوتر حيث ان لكل شىء محرك ، لتصميم صورة رائعة تحتاج الى تحميل برنامج تعديل الصور مثل برنامج فوتوشوب الشهير التابع لأدوبي ، كذلك ان اردت مشاهدة فيديو رائع ، يمكنك ذلك من خلال تحميل برنامج يوتيوب لمشاهدة جميع الفيديوهات والقنوات الاخبارية والاحداث العالمية من خلالة ، وان كنت من محبى سماع الصوتيات والنغمات يمكنك ذلك من خلال تحميل برامج كمبيوتر.
    تنزيل بعض برامج الصوت مثل الريال بلاير او الميديا بلاير وغيرها من برامج الصوت المشهورة والمميزة ، لذلك سوف نرى ان جميع برامج الكمبيوتر هى محركات اساسية للوصول لهدف محدد وواضح ، وان كل شىء يحتاج الى برنامج للتعامل معه بشكل كامل وبامكانيات تجعلك تتحكم فيه بشكل شبه كلي ، لذلك ينصح جميع المستخدمين بتحميل البرامج التى تحتاجها بشكل يومى ، كما ان خبراء البرامج والكمبيوتر ينصحون دائما باعتبار الكمبيوتر هو ناقتك التى تحملك فى عالم الانترنت ، وينصحونك بعدم تحميل البرامج التى لا تحتاج لها ، وان لا تنزل البرامج الا التى تحتاجها وتستخدمها بشكل دائم ، وان هذا هو أفضل إستخدام للكمبيوتر للحفاظ عليه والاستمرار بشكل جيد ودائم .

    تحميل متصفحات الأنترنت :
    يوجد العديد من المتصفحات الجيدة التي يمكنك استخدامها للتصفح فى المواقع ، ولكن سوف ننصحك بعدة برامج مميزات ومتصفحات رائعة اثبتت بالتجارب انها الأفضل على الاطلاق ، اهم هذه المتصفحات ، متصفح جوجل كروم ، متصفح فايرفوكس ، متصفح اوبرا .
    تطبيقات أندرويد :
    فى عالم الاندرويد سوف تجد ان برامج الاندرويد اصبحت هامة جدا وان تحميل تطبيقات الاندرويد وبرامج الاندرويد ، وخصوصا العاب الاندرويد التى أصبحت شبه واقعا مثل لعبة بوكيمون جو الشهيرة والتى ظهرت مؤخرا .
    اصبحت تحميل العاب من أكثر الاشياء بحثا وتحميلا فى هذا الوقت ، نظرا لسهولة اللعب ونتيجة ان العاب الاندرويد لا تحتاج الى جهاز كمبيوتر ، ولا تحتاج سوف الهاتف الذكي الذى تستخدمة بشكل دائم مما جعل اللعب اكثر متعة وسهولة ويمكنك ان تلعب هذه الالعاب فى السيارة او اثناء السفر او على الطائرة او فى اى وقت .

    برامج اندرويد :
    أنصحك باستخدام العديد من برامج الاندرويد ، ولكن يوجد عدة برامج انصحك باستخدامها ، اهم هذه البرامج برنامج واتساب اب ، برنامج لاين ، وتنزيل جميع تطبيقات الشات ، مثل تحميل فيس بوك ، تنزيل تويتر ، وغيرها من البرامج الهامة التى تستخدم فى التواصل الاجتماعى ، تحميل برنامج يوتيوب وتنزيل فيس بوك لايت ايضا فهو نسخة خفيفة لاستخدامه الفيس بشكل سريع وسهل ، تحميل برنامج ايمو وتنزيل برنامج تيليجرام ايضا فهو برنامج سريع مثل الواتس اب ،هذه البرامج الأكثر تحميلا فى تطبيقات الاندرويد والأيفون .

    الخلاصة :
    يوجد العديد من البرامج الهامة والتى نرغب فى استخدامها ، ولكن اهم هذه البرامج التى ننصحك باستخدامها هى برنامج وينرار وهو برنامج مشهور فى فك وضغط الملفات لسهولة ارسالها واستلامها على الانترنت ، برنامج ياهو ماسنجر فهو أول ماسنجر ظهر فى عالم الاتصال على الانترنت . كما ننصحك بتحميل برنامج حجب المواقع الاباحية ايضا ، فهو برنامج هام جدا وعملي . يمكنك ايضا تحميل برنامج شير ات فهو من افضل البرامج الجديدة ايضا وننصح بتحميلة . وهذه تعتبر خلاصة لأفضل برامج تحميل كمبيوتر ويمكنك تحميل جميع هذه البرامج من الانترنت من خلال برنامج انترنت داونلود مانجر 2017 الجديد واخر نسخة .

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.