WordPress.org

Ready to get started?Download WordPress

Forums

Format text on posts imported into static HTML page (13 posts)

  1. samitr
    Member
    Posted 7 months ago #

    Hello,

    I needed a way of having posts that are easy to update (for a news section) show up on static html pages. I have, after some difficulty and help reading these forums, managed to get a semblance of things working (see page temporarily hosted at http://roychoudhury.in/rajda/x3.html.

    My query is... How do I apply styles to the scrolling text? Need to change the size and font etc. Also, if you note, the month and date appear on separate lines, wasting a lot of space. I want for it to appear in a single line, possibly with the year displayed. Finally, is there a way of making the Heading of the newsitem link to the page, instead of a Read More link?

    Thanks in advance...

  2. Mpwassler
    Member
    Posted 7 months ago #

    .text p will style paragraphs and .text h4 will style headers also part of the date is in an h5 tag and part of it is in a p tag they should just both be in the same h5 tag and yeah just wrap the h4 tags content in the anchor tag you currently have wrapping the read more links . . . i feel like i'm missing something here, are you writing the html tags for this scroller or are they being generated ... also css should be in your external style sheet or at least in <style></style> tags . . . you have css just randomly sitting in table cells at the bottom of your page

  3. samitr
    Member
    Posted 7 months ago #

    Hi. Thanks for your response.

    Unfortunately I am not a coder, and while I understand what h4 & h5 are, telling me to wrap the h4 tags content is almost Greek to me :)

    I have not written any tags for scroller. So I have no idea where to make the changes. Will check about the CSS at bottom of page, that may be leftovers from CSS pasted there for a little code that keeps footer at the bottom of the page.

  4. Mpwassler
    Member
    Posted 7 months ago #

    We'll do you have a template file or something you could edit cuz this is actually a real easy fix like it's basically changing <h4> title </h4> to <h4>title</h4>

  5. samitr
    Member
    Posted 7 months ago #

    Oh I will have to check. Will need a while.

  6. samitr
    Member
    Posted 7 months ago #

    Ok what I have done is:
    On my html I have inserted an iframe. The file that the iframe refers to has the following script:

    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <DIV ID="datacontainer" STYLE="Position : Absolute ; Left : 0px ; Top : 0px ; Width : 100%" onMouseOver="scrollspeed=0"
    onMouseOut="scrollspeed=cache">
    <!-- ADD YOUR SCROLLER CONTENT INSIDE HERE -->
    <div id="voodooBlog">
    <?php while (have_posts()): the_post(); ?>
    <div class="dateIcon">
    <h5><?php the_time('M'); ?></h5>
    <p><?php the_time('j'); ?></p>
    </div>
    <div class="text">
    <h4><?php the_title(); ?></h4>
    <?php the_excerpt(); ?>
    <p></p>
    ">Read More...
    </div>

    <?php endwhile; ?>
    </div>
    <!-- END SCROLLER CONTENT -->
    </DIV>
    <P><SCRIPT type="text/javascript">

    /***********************************************
    * IFRAME Scroller script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    //Specify speed of scroll. Larger=faster (ie: 5)
    var scrollspeed=cache=1

    //Specify intial delay before scroller starts scrolling (in miliseconds):
    var initialdelay=500

    function initializeScroller(){
    dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
    dataobj.style.top="5px"
    setTimeout("getdataheight()", initialdelay)
    }

    function getdataheight(){
    thelength=dataobj.offsetHeight
    if (thelength==0)
    setTimeout("getdataheight()",10)
    else
    scrollDiv()
    }

    function scrollDiv(){
    dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px"
    if (parseInt(dataobj.style.top)<thelength*(-1))
    dataobj.style.top="5px"
    setTimeout("scrollDiv()",40)
    }

    if (window.addEventListener)
    window.addEventListener("load", initializeScroller, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initializeScroller)
    else
    window.onload=initializeScroller

    </SCRIPT>

  7. Mpwassler
    Member
    Posted 7 months ago #

    Where it says add scroller content here replace it with this

    <div id="voodooBlog">
    <?php while (have_posts()): the_post(); ?>
    <div class="dateIcon">
    <h5><?php the_time('M'); the_time('j'); ?></h5>
    
    </div>
    <div class="text">
    <h4><a><?php the_title(); ?></a> </h4>
    <?php the_excerpt(); ?>
    
    </div>
    
    <?php endwhile; ?>
    </div>

    Then u gotta use .text h4{ styles:here; } and .text p {styles:here;} to style

  8. Mpwassler
    Member
    Posted 7 months ago #

    i didnt know what to put in the <a> tag tho beacuse you didnt escape it in your post so it showed as a link and not the tag but it will most likely be href ="<?php the_permalink() ?>"

  9. samitr
    Member
    Posted 7 months ago #

    Thank you so much. I will try it in a while and let you know :)

  10. samitr
    Member
    Posted 7 months ago #

    Hi Mpwassler,
    Thanks again.

    It kind of worked. But not completely. I managed to have the heading link to the main entry, but somehow it is not taking in all the styling correctly. The h4 and h5 styles have been ignored.

    Also, there is no gap (vertical space) between entries. How do I do that? And how do I remove the (...) after each entry? I assume I do not need it. Shall I just delete it from the code?

  11. Mpwassler
    Member
    Posted 7 months ago #

    I realized that your style sheet can't style I frames from another site there is a solution but I don't know off the top of my head and I'm out right now I'll look into it when I get home as see if I can fix it

  12. samitr
    Member
    Posted 7 months ago #

    Thanks a ton again.

  13. Mpwassler
    Member
    Posted 7 months ago #

    can you try to link a sytlesheet into the iframe . . . like put a <link type="text/css" rel="Stylesheet" href="stylesheet.css" />
    inside of the iframe tag. then that style sheet will affect it. otherwise we would probably need to inset it with javascript

Reply

You must log in to post.

About this Topic