Jump to content


These Forums Are Now Read-Only


For TubePress support, please post a question here or open a support ticket and we will be glad to assist.


Photo

Customize Tubpress To Match Website Theme


Best Answer sikhri , 28 June 2014 - 11:35 AM

Thanks for the support

 

i modified Buttons & padding - http://sikhri.org/videos/

 

 

Note: 

Path is below for css (not as specified in the linked post Or documentation)   

/wp-content/plugins/tubepress_pro_3_1_6/src/main/web/css

 

I modified to below styles:

 

div.tubepress_container div.pagination {
    font-size: 13px;
    text-align:center;
    clear: both;    
    margin: 2em 0;
}
 
div.tubepress_container div.pagination a, div.tubepress_container div.pagination span {
    display: inline-block;
    margin: 4px !important;
    text-decoration: none;
    padding: 3px 5px;
    cursor: pointer;
    line-height: 20px;
}
 
div.tubepress_container div.pagination span.current {
    background-color: #007fc9;
    color: #fff;
    text-decoration: none;
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 19px;
    padding: 10px 12px;    
}
 
div.tubepress_container div.pagination a {
     background: none repeat scroll 0 0 #f4f4f4;;
     border: medium none;
     color: #b2b2b2;
     display: inline-block;
     margin: 0px;
     text-decoration: none;
     font-family: 'Source Sans Pro',sans-serif;
     font-size: 19px;
     padding: 10px 9px;
     transition: all 0.5s ease 0s;
}
 
div.tubepress_container div.pagination a:hover {
background: none repeat scroll 0 0 #e0e0e0;
}
Go to the full post


  • Please log in to reply
9 replies to this topic

#1 sikhri

sikhri

    Newbie

  • Members
  • Pip
  • 9 posts

Posted 19 June 2014 - 09:40 AM

Hi,

 

I am looking to match fonts, colors etc on Tubepress to our wordpress website's theme.

 

I have come across below link and understand that i need to edit /tubepress_pro_3_0_1/src/main/web/css/tubepress.css

http://community.tub...s-in-wordpress/

 

Could some one help me with:

1. How do i make tube press inherit or use fonts & colors used by Wordpress theme?

2. How can i change the link color/font on Video Title ?

 

Page tube press being used - http://sikhri.org/videos/

 

Thanks



#2 brandon

brandon

    Advanced Member

  • TubePress Staff
  • 1989 posts

Posted 19 June 2014 - 02:22 PM

Hello Sikhri,

 

That is correct that you will have to edit the tubepress.css file, although I recommend that you update to 3.1.6 as your version is quite old.

 

My suggestion for figuring out which lines/items need to be changed is to load your page in firefox with the firebug plugin and make the edits to the CSS until you get the desired outcome, then make the final changes to a copy of the tubepress.css (make a backup of the original in case you inadvertently break something) and test it out.

 

Thanks!


Want a faster, more personalized support experience? Open a ticket with us! We will be gradually phasing out forum-based support in favor of a proper ticketing system. Please help us help you!


#3 sikhri

sikhri

    Newbie

  • Members
  • Pip
  • 9 posts

Posted 19 June 2014 - 04:26 PM

Could you please with:

 

1. Downloading 3.1.6

When i go to this page - i don't see a download button for 3.1.6

http://community.tub..._download&id=11

 

 

2. Is there a way to INHERIT wordpress theme font/colors OR they have to specified in the tube press css.

 

Thanks



#4 brandon

brandon

    Advanced Member

  • TubePress Staff
  • 1989 posts

Posted 19 June 2014 - 06:11 PM

Hello,

 

1: We are working on fixing that issue and apologize for the inconvenience.

 

2: Yes, the tubepress.css file can be modified to allow CSS inheritance, just like any other CSS file and settings.

 

Thanks!


Want a faster, more personalized support experience? Open a ticket with us! We will be gradually phasing out forum-based support in favor of a proper ticketing system. Please help us help you!


#5 brandon

brandon

    Advanced Member

  • TubePress Staff
  • 1989 posts

Posted 19 June 2014 - 08:16 PM

Hello, The link for TubePress 3.1.6 has been fixed.  Please try downloading this again.

 

Thanks!


Want a faster, more personalized support experience? Open a ticket with us! We will be gradually phasing out forum-based support in favor of a proper ticketing system. Please help us help you!


#6 sikhri

sikhri

    Newbie

  • Members
  • Pip
  • 9 posts

Posted 27 June 2014 - 02:59 PM

Hi 

 

Could you please tell us if below is doable & how?

 

Make the buttons have the same look & feel as the site, which they currently don't. They look very clunky.

 

Page: http://sikhri.org/videos/

 

Thanks



#7 brandon

brandon

    Advanced Member

  • TubePress Staff
  • 1989 posts

Posted 27 June 2014 - 04:44 PM

Hello sikhri,

 

Yes it is do-able.  You simply need to create your own template: http://nextdocs.read...emes/index.html

 

and then modify the CSS so that the buttons match the rest of your site.

 

Let us know if you need any further assistance.

 

Thanks!


Want a faster, more personalized support experience? Open a ticket with us! We will be gradually phasing out forum-based support in favor of a proper ticketing system. Please help us help you!


#8 sikhri

sikhri

    Newbie

  • Members
  • Pip
  • 9 posts

Posted 27 June 2014 - 04:53 PM

Hi Brandon,

 

Could you please tell me what css tag the button is using?

 

Thanks



#9 brandon

brandon

    Advanced Member

  • TubePress Staff
  • 1989 posts

Posted 27 June 2014 - 05:26 PM

Hello,

 

You can see what CSS applies to which items by using Firebug (an add-on for Firefox).

 

For the pagination buttons, the follow CSS items are being applied:

div.tubepress_container div.pagination {
    clear: both;
    font-size: 13px;
    margin: 0.7em 0;
    text-align: center;

on line 185 of Tubepress.css

 

 

Thanks!


Want a faster, more personalized support experience? Open a ticket with us! We will be gradually phasing out forum-based support in favor of a proper ticketing system. Please help us help you!


#10 sikhri

sikhri

    Newbie

  • Members
  • Pip
  • 9 posts

Posted 28 June 2014 - 11:35 AM   Best Answer

Thanks for the support

 

i modified Buttons & padding - http://sikhri.org/videos/

 

 

Note: 

Path is below for css (not as specified in the linked post Or documentation)   

/wp-content/plugins/tubepress_pro_3_1_6/src/main/web/css

 

I modified to below styles:

 

div.tubepress_container div.pagination {
    font-size: 13px;
    text-align:center;
    clear: both;    
    margin: 2em 0;
}
 
div.tubepress_container div.pagination a, div.tubepress_container div.pagination span {
    display: inline-block;
    margin: 4px !important;
    text-decoration: none;
    padding: 3px 5px;
    cursor: pointer;
    line-height: 20px;
}
 
div.tubepress_container div.pagination span.current {
    background-color: #007fc9;
    color: #fff;
    text-decoration: none;
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 19px;
    padding: 10px 12px;    
}
 
div.tubepress_container div.pagination a {
     background: none repeat scroll 0 0 #f4f4f4;;
     border: medium none;
     color: #b2b2b2;
     display: inline-block;
     margin: 0px;
     text-decoration: none;
     font-family: 'Source Sans Pro',sans-serif;
     font-size: 19px;
     padding: 10px 9px;
     transition: all 0.5s ease 0s;
}
 
div.tubepress_container div.pagination a:hover {
background: none repeat scroll 0 0 #e0e0e0;
}