I'm using Wordpress 5.2.2 with Newspress Extend theme as the parent.
I restored the default settings of the theme in Appearance --> Newspress Options in an attempt to fix something unrelated, and lost the custom html/inline css that floated the advertisements, one left and one right to be sandwiching the logo. Oops. I tried to guess the replacement code based on my very limited knowledge of html/css and it's rendering them above not only the logo, but the top menu as well. I know this change can be done in this section because I'm just trying to restore it to what it was from the previous developer. Help would be greatly appreciated.
Appearance --> Newspress Options --> General Options --> Custom code within Head area (all pages)
<img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/FLO_16975_Education-Print-Ad-Ebony-News-Today_10.625x10.445-GLOBE-C.jpg" alt="fla lottery" style="float:left; max-width: 25%;">
<img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/SEH_EbonyNewsAd_OCT2017-1.jpg" alt="southeastern honda"/ style="float: right; max-width: 25%;">
custom css screenshot
logo screenshot in Newspress theme's custom interface
page in question
Your ads are sitting outside of the container div. They're actually sitting above the site's metatags at the moment. CSS is a powerful tool, but it shouldn't be used to over-correct or mask improper HTML structure. You need to stuff your ads into their respective divs.
This is how your HTML should look, specifically for your header div:
<div id="header">
<div id="header-content">
<!-- Site Titele and Description Goes Here -->
<div class="topadlft"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/FLO_16975_Education-Print-Ad-Ebony-News-Today_10.625x10.445-GLOBE-C.jpg" alt="fla lottery"><img src="http://ebonynewstoday.com/wp-content/themes/newspress-extend/images/ad3.png"></div>
<img class="site-logo" src="http://ebonynewstoday.com/wp-content/uploads/2017/04/Ebony_LOGOHorizontal_Color.gif"><h1 class="site-title-hidden">Ebony News Today</h1>
<h2 class="site-title-hidden">"The Heartbeat of Our Community"</h2>
<div class="topadrt"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/SEH_EbonyNewsAd_OCT2017-1.jpg" alt="southeastern honda"><img src="http://ebonynewstoday.com/wp-content/themes/newspress-extend/images/ad3.png"></div>
</div><!-- header-content -->
<div class="heading-date">Friday, October 4, 2019</div>
</div>
You will also want to turn off the "display:none;" selectors in your CSS file for the "topadlft" and "topadrt" classes. Also remove the inline styles from each ad image. You're going to want the div classes that contain the ads to do the heavy lifting here. Inline styles will just cause further complications.
Once you've addressed the above, you should wind up with something that looks like this:
Fixed Header Image
Related
I'd like to have that outline circle around the word "reality" but it also has to be responsive. The end goal is below.
Currently however, I have what is below.
Since I am using Gutenberg, I do not know how to overlay the image on the given word. I have tried relative CSS (setting the image to relative and adding px to try and fit it). Not only did that not work, it would not be responsive anyways. Is there any custom CSS for me to achieve this?
The following are my blocks turned into CSS:
<div class="wp-block-kadence-column inner-column-1 kadence-column_84ec52-24"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"level":1,"uniqueID":"_4a3254-47","color":"#333333","size":60,"lineHeight":70,"mobileSize":50,"mobileLineHeight":60,"typography":"Lora","googleFont":true,"fontSubset":"latin","fontVariant":"700italic","fontWeight":"700","topMargin":0,"bottomMargin":10,"markSize":["","",""],"markLineHeight":["","",""],"markPadding":[0,0,0,0],"colorClass":""} -->
<h1 class="kt-adv-heading_4a3254-47 wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading_4a3254-47">We write your<br>ideas into <em>reality</em>.</h1>
<!-- /wp:kadence/advancedheading -->
<!-- wp:kadence/image {"id":1976,"sizeSlug":"full","linkDestination":"none","uniqueID":"_e2485d-a0"} -->
<figure class="wp-block-kadence-image kb-image_e2485d-a0 size-full"><img src="http://emandapen.local/wp-content/uploads/2022/09/Vector.png" alt="" class="kb-img wp-image-1976"/></figure>
<!-- /wp:kadence/image -->
</div></div>
Thanks in advance.
I'm typically more of a backend guy, but I find myself working on a project that requires some frontend work. I'm fumbling my way through using bootstrap, and I find myself stuck on the following:
<div id="form" class="col-md-6">
<!-- form goes here -->
</div>
<br /> <!-- multiple br tags do nothing, as long as col-md-6 is used above -->
<div id="image_container">
<image src="myimage.jpg" />
</div>
I want a gap between the end of the form and the top of the image, but col-md-6 seems to be resulting in there being overlap, and the image-div is vertically larger than it is on the same page with col-md-6 removed.
Admittedly, CSS has never been my forté, but I'm hoping to address that soon. In the meantime, can someone help me out with this issue?
Seems you're not using the grid system correctly, you have to use rows and cols to separate your elements in your frontend.
Check this link about Bootstrap Grid System
I need some help here.
I found the "Miniport" template by "html5up" and I want to use this template as a base for my future projetc.
The demo can be seen here: http://html5up.net/miniport
On the demo we can see that bellow the website menu is an circular image and next to it is some texts. I need to know how to remove that image and center the texts so the texts can match the rest of the template (the site has the divs centered too).
I dont have much skills on css nor html5. Im a fan and I want to learn.
If anybode can help me, please..
Sorry about my english.
I too am using this template.
In order to remove the image, open the html document.
Delete this code that is found between ~line 42—46: (this is what formats and holds your image)
<article class="container" id="top">
<div class="row">
<div class="4u">
<span class="image fit"><img src="images/angela.jpg" alt="" width="118%" height="350" /></span>
</div>
Reformat the div tag:
<div class="8u"> to <div class="container" align="center">
By doing this, you are modifying the style within the html document rather than the css doc. This is good since you do not want to change every div tag in the html doc, just this one. Additionally, adding align="center" helps override most css formatting within your divs. You can use that trick later on in your site.
On a side note, double check that you like the command the contact form uses. I do not, since it opens up my computer's email app rather than directly sending the email through the webpage. That's my next project.
Enjoy!
Can someone please help me with something. Im building a website and it includes html5. The thing that i dont understand is using the <section> function.
Preview
<section id="1">
click her to go to section 2
</section>
this is the section 2
<section id="2">
<!-- html source where <p> and etc will go -->
</section> Closed Section
The section above is what i only want to be seen in the webpage instead of showing section 2. Its pretty much like having many pages in 1 just without reloading or scrolling down.
In my css i have scroll bar locked, and ive tried many things to make that section to only be show on the webpage. Im kindof learning new html5 functions and im experiencing the things now
http://jsfiddle.net/K2w49/
I think you're a bit confused about what a function is. <section> is an HTML5 element. No function involved.
If you're talking about having a seamless fullscreen interface (i.e. they never scroll, new stuff just loads in similar to Flash applications), then it doesn't really matter what html container you use (i.e. div, section, aside)
For example..
<div class="wrapper">
<section id="slide-1" class="slide">
<!-- content -->
</section>
<section id="slide-2" class="slide">
<!-- content -->
</section>
</div>
Then max the wrapper and attach an absolute or fixed value to it...
Here's what you asked for: http://jsfiddle.net/K2w49/7/
If you're going to have a lot of content, you should use AJAX to load as needed and change the script around a little.
Currently when I attempt to use data-role=collapsible there is nothing left (no button, link or content). According to the documentations it uses a h1-h6 tag but mine is inside a html5 header block.
Should I forget about the html5 semantics since this is a mobile site? Or should I attempt to make it work somehow, if so any ideas?
Link to docs: http://jquerymobile.com/demos/1.0a3/#docs/content/content-collapsible.html
Example of my current setup:
<article data-role="collapsible" data-collapsed="true">
<header>
<h2>Title</h2>
</header>
<div class="content">
<!-- some data -->
</div>
<footer>
<!-- some data -->
</footer>
</article>
jQuery Mobile is built with progressive enhancement in mind, so it assumes you want your app to work in any device possible ("work" meaning just support basic features)
Try replacing your nicely named tags with DIVs and remove wrapper around H2. Should help.