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
I have a (complex) toolbar panel which can be on top or bottom of a page (it's configurable). Is there any way to avoid copy/paste the toolbar in bottom of the page?
Here is code in copy/paste way:
<div id="topToolbar" data-ng-show="configs.toolbarPosition=='TOP'">
<!-- toolbar -->
</div>
<div>
<!-- inner page contents -->
</div>
<div id="bottomToolbar" data-ng-show="configs.toolbarPosition=='BOTTOM'">
<!-- exactly copy/pasted toolbar -->
</div>
Keep the tool bar html in separate file, and include where ever you need.
<ng-include src="'views/toolbar.html'"></ng-include>
Also if you needed add a controller for all functionality. This will help you to reuse your code.
you can check how components are made
and make component <toolbar></toolbar>
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.
Look here.
I want to update the BC page title tag so that it updates and shows the correct page title on every page. Right now it's in the website template and it needs to stay there for ease for customer editing.
{tag_pagetitle} Displays current page title. Must be used within the title tag of the template.
eg.
<!-- TemplateBeginEditable name="doctitle" -->
<title>{tag_pagetitle}</title>
<!-- TemplateEndEditable -->
Often while coding view templates in html, my habit of adding some helpful comments causes lots of time-consuming effort while testing.
Consider this code...
<!-- Here starts the sidebar -->
<div id="sidebar">
....
</div>
<!-- Here starts the main contents pane -->
<div id="main-contents">
...
</div>
<!-- Here starts the footer -->
<div id="footer">
...
</div>
Now, if I have to hide out some portion of the view template, in case of php I would just select the desired code and put single-line comments (using a shortcut key most of the times).
However, in html code, where only the block comments work, I end-up removing all the closing comment tags (-->) till the position I want the commenting to occur - something like this...
<!-- Here starts the sidebar
<div id="sidebar">
....
</div>
<!-- Here starts the main contents pane
<div id="main-contents">
...
</div>
<!-- Here starts the footer
<div id="footer">
...
</div>-->
Then when I'm done testing I have to go through the agony of putting back those closing tags.
Is there a better and time saving way of block commenting in HTML?
Yes, to comment structural metadata out,
Using <script>/* ... */</script> in .html
Comment out large sections of HTML (Comment Out Block)
my personal way in a .html file is opening: <script>/* and close it with */</script>
<script>/* hiding code go here */</script>
Is a workaround to the problem since is not HTML.
Considering your code in .html...
<!-- Here starts the sidebar -->
<div id="sidebar">
....
</div>
<script>/*
<!-- Here starts the main contents pane -->
<div id="main-contents">
...
</div>
<!-- Here starts the footer -->
<div id="footer">
...
</div>
*/</script>
And in a case is HTML inside PHP file using comment tag <?/* or <?php /* and close it with */?> . Remember that the file must be .php extension and don't work in .html.
<?/* hiding code go here */?>
Considering your code in .php...
<!-- Here starts the sidebar -->
<div id="sidebar">
....
</div>
<?/*
<!-- Here starts the main contents pane -->
<div id="main-contents">
...
</div>
<!-- Here starts the footer -->
<div id="footer">
...
</div>
*/?>
Is worth nothing that is not HTML but a common developer practice is to comment out parts of metadata so that it will not be rendered and/or executed in the browser. In HTML, commenting out multiple lines can be time-consuming. It is useful to exclude pieces of template structural metadata containing comments, CSS or code and systematically commenting out to find the source of an error.
It is considered a bad practice to comment blocks out and it is recommended to use a version control system.
The attribute "type" is required in HTML4 and optional in HTML5.
Depends on the extension. If it's .html, you can use <? to start and ?> to end a comment. That's really the only alternative that I can think of. http://jsfiddle.net/SuEAW/
you can try to replace --> with a different string say, #END# and do search and replace with your editor when you wish to return the closing tags.
I find this to be the bane of XML style document commenting too. There are XML editors like eclipse that can perform block commenting. Basically automatically add extra per line and remove them. May be they made it purposefully hard to comment that style of document it was supposed to be self explanatory with the tags after all.
Put a space between the "-->" of your header comments. e.g. "- ->"
My view templates are generally .php files. This is what I would be using for now.
<?php // Some comment here ?>
The solution is quite similar to what #Robert suggested, works for me. Is not very clean I guess.
Eclipse Juno has a good way for it. You just do the cmd+/
The following works well in a .php file.
<php? /*your block you want commented out*/ ?>
No. Unless you find a tool that does what you described for you.
Depending on your editor, this should be a fairly easy macro to write.
Go to beginning of line or highlighted area
Insert <!--
Go to end of line or highlighted area
Insert -->
Another macro to reverse these steps, and you are done.
Edit: this simplistic approach does not handle nested comment tags, but should make the commenting/uncommenting easier in the general case.
/* (opener)
*/ (closer)
for example,
<html>
/*<p>Commented P Tag </p>*/
<html>