WordPress.org

Ready to get started?Download WordPress

Forums

Padded space between elements (5 posts)

  1. budakhan01
    Member
    Posted 2 years ago #

    Hey guys. Can you take a look at this page of mine?
    http://www.donaldsinatra.com/video-production/
    I'm trying to separate the text from the embedded videos but hspace doesn't seem to be working. I think it may be in the CSS code but I can't locate exactly where.
    I'm not a coding pro master, as I am basically stumbling around. hspace seems to just shift my video over to the left underneath my images and text.
    I'm using the Blaskan theme with the latest version of WordPress.
    Thanks

  2. Marventus
    Member
    Posted 2 years ago #

    Hi!
    Since your videos are being wrapped by <p> tags automatically (this is default WP functionality), you will need to target the paragraphs containing them using jQuery. My suggestion would be to add a CSS class to all paragraphs containing videos, so that you cans tyle them from your style sheet. Here's how:
    1. Open your script.js theme file. It's located in the folder:

    wp-content/themes/blaskan/js/

    2. Insert the following code:

    // Add CSS class to paragraphs containing videos
    $('p object, p iframe').parents('p').addClass('par-videos');

    Between the last two lines of code:

    });
    [code goes here]
    })(jQuery);

    3. Then, you can target paragraphs containing videos using the par-videos class like so:

    .par-videos{
    display:block;
    float:left;
    margin-right:20px;
    margin-bottom:20px;
    }

    You can change the margin values as desired to adjust the space between the videos and the rest of the text.

  3. budakhan01
    Member
    Posted 2 years ago #

    Thanks very much for posting. I modified the blaskan script.js file like so:

    /**
     * Create a select list from the menu
     * Credits: http://bit.ly/ultoselect
     */
    (function($) {
      $(function() {
        if (!$('body').hasClass('advanced-menu')) {
          return false;
        }
    
        var $select = $('<select>')
          .appendTo('#nav');
    
        var $option = $('<option>')
          .text(objectL10n.blaskan_navigation_title)
          .val('')
          .appendTo($select);
    
        $('#nav li').each(function() {
          var $li    = $(this),
              $a     = $li.find('> a'),
              $p     = $li.parents('li'),
              prefix = new Array($p.length + 1).join('-');
    
          var $option = $('<option>')
              .text(prefix + ' ' + $a.text())
              .val($a.attr('href'))
              .appendTo($select);
    
          if ($li.hasClass('current_page_item')) {
            $option.attr('selected', 'selected');
          }
    
          if ($li.children().size() > 1) {
            $li.addClass('has-children');
          }
        });
    
        $('#nav select').change(function() {
          var location = $(this).find('option:selected').val();
    
          if (location.length != 0) {
            window.location = location;
          }
        });
    
        $('#content').fitVids();
      });
    // Add CSS class to paragraphs containing videos
    $('p object, p iframe').parents('p').addClass('par-videos');
    })(jQuery);

    I then added the css code you gave me into my style.css file. The margins are still unaffected. I did enclose the text and video embed code in paragraphs via html using the <p> and </p> tags just to experiment. To no avail.
    Am I missing a step? There are 3 other .css files this theme has (editor-style.css, frameworks.css, theme-options.css). Should I try to enter the css code you gave me in these other files?
    Thanks again.

  4. Marventus
    Member
    Posted 2 years ago #

    I checked the link you had shared before, and you seem to have pasted an escaped version of the code you need to insert inside script.js. In that file, all your single quote symbols are being rendered as #39. You can see the pb here. Make sure the new line reads exactly like this:

    $('p object, p iframe').parents('p').addClass('par-videos');

    Also, make sure you are using either a text editor, such as Notepad+, an HTML editor, such as Dreamweaver, or the WP editor directly from your WP Admin page (Admin --> Appearance --> Editor).
    Here is a JSFiddle just in case to show you the code works. In this case, I'm changing the font color of all paragraphs containing videos (works with both <object> and <iframe> tags).

  5. Marventus
    Member
    Posted 2 years ago #

    Hi.
    Never heard back from you.
    Were you able to make this work?

Topic Closed

This topic has been closed to new replies.

About this Topic