Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2020-08-27 22:31:57
- gu
- Member
- Registered: 2020-08-27
- Posts: 59
N00b Q. re. coding default page from zero
Background:
- I am here because I like the textpattern concept and think it would be good for a co-collaborative space for shared and interlinked knowledge.
- I don’t know much code but am determined to learn enough to create something simple I can use and can offer to others (if I succeed in making the simple page!)
Question:
How can I get my search bar aligned right? I want it to be in the same line as my txp home link and my logo, which it currently is, except it is currently aligned centre.
Here is the HTML:
<div class="header">
<header id="masthead">
...etc...
<a id="search"><span style="align:right"><txp:search_input /></span></a>
</div> Please note that I added the span out of desperation.
Here is the CSS:
header#masthead {
display: flex;
align-items: center;
max-width: 69em;
margin: 3em auto;
padding: 0 1em;
}
header#masthead a {
border-bottom: unset;
}Thank you for your time!
<!— space for hope —>
Offline
Re: N00b Q. re. coding default page from zero
I can’t help with your CSS stuff (I’m out of practice), but welcome aboard!
Offline
Re: N00b Q. re. coding default page from zero
Here’s how I have it. You should be able to play around and alter classes, margins, widths, heights to suit.
<div class=“header-wrap”>
<header class=“site-header”>
<h1 itemscope itemtype=“https://schema.org/Organization”><a class=“logo” itemprop=“Brand” href=”<txp:site_url />”><txp:site_name /></a>
</h1> <txp:search_input />
</header>
</div>
And the CSS:
.header-wrap { height: 200px; width: 100%; margin: 0 auto; } .site-header { width: 95%; margin: 0 auto; padding: 0; max-width: 880px; } .search { position:relative; float:right; margin-right: 0; margin-top:0; padding: 0; }
Offline
#4 2020-08-28 09:24:20
- gu
- Member
- Registered: 2020-08-27
- Posts: 59
Re: N00b Q. re. coding default page from zero
@gaekwad – thank you for the welcome!
@zero – thank you so much!
(It will take me a mo’ to digest what you wrote, but super grateful, cheers.)
Last edited by gu (2020-08-28 09:25:33)
<!— space for hope —>
Offline
#5 2020-08-28 17:23:28
- gu
- Member
- Registered: 2020-08-27
- Posts: 59
Re: N00b Q. re. coding default page from zero
…I feel very embarrassed to see that I did not specify I meant in the same horizontal line.
But the good thing is that I learned about itemscope.
I am definitely over my head but something is compelling me to keep at it – but I will trust someone will tell me if they think I should go to a more basic place than here, which has the extra txp dimension.
<!— space for hope —>
Offline
Re: N00b Q. re. coding default page from zero
gu wrote #325643:
…I feel very embarrassed to see that I did not specify I meant in the same horizontal line.
But the good thing is that I learned about itemscope.
I am definitely over my head but something is compelling me to keep at it – but I will trust someone will tell me if they think I should go to a more basic place than here, which has the extra txp dimension.
itemscope is extra fluff for many, but excellent for accessibility and structuring html documents. Do keep it up as it will help you long term.
There is no issue with us helping the building txp powered sites. This includes, discussing css, html, accessibility, SEO, js and php. It will be a learning curve, but we are all on it.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
#7 2020-08-28 17:40:11
- gu
- Member
- Registered: 2020-08-27
- Posts: 59
Re: N00b Q. re. coding default page from zero
Hi colak, thank you so much for the encouragement – it came at the right time.
Btw – your app really looks to me like a way to make Matuschak/fancier-wiki-style interconnections available large scale.
I hope to be able to make it through this beginner’s stump to contribute something. I am just a tad concerned because of time but try to console myself because I think that my dream page is not too ambitious. OK – back to work…
<!— space for hope —>
Offline
Re: N00b Q. re. coding default page from zero
The code was for a horizontal line. You can see how I used that code here. If you also wanted a logo image in the centre on the same horizontal line, you would put a position:relative on the containing element and then a position:absolute on the logo image, with a top: 0; text-align:center or something along those lines. (A lot depends on the context of where you are positioning it because Cascading Style Sheets cascade — ie they affect other elements above, below and around them.)
The default Textpattern theme can help a lot, you can copy paste bits of it, or even use it all with alterations to suit your needs. If you follow that link, click on the dist/four-point-nine folder, then the styles folder you can see the CSS for the Textpattern demo site. This has an interesting navigation bar and search icon all on the same horizontal line. You could use that code but replace the navigation with your site name and logo.
I used to be a newbie and am useless at programming but I can manage HTML and CSS, and learned by trial and error, copy and paste. But I’m not a professional and probably a website with basic tuition of HTML and CSS may have been better in the long run. But this is a friendly forum, so don’t be afraid to ask. If you’d like to post your code we can look at it and see why it isn’t horizontal.
Offline
Re: N00b Q. re. coding default page from zero
Sorry if I’m giving you too much to think about but there’s one point I noticed. In the code you posted, it is not standard Textpattern code — so have you tried installing Textpattern yet? If you have and tried it out, then that’s fine, and you can use any code you like. But if you haven’t, I recommend installing Textpattern because the default theme has lots of comments with the pages and forms which helps you with tags, and also plenty of comments in the stylesheet. I think it’s worth while working your way through code bit by bit to get an understanding of how things fit together.
Also <txp:search_input /> produces a lot of code you may not know about. To see it, look at the page source of a web page made with Textpattern (usually Ctrl + U brings up the source). You will see amongst other things it uses the .search class which is the one you need for positioning.
I hope that helps. Take your time – there’s a lot to learn – enjoy yourself!
Offline
#10 2020-08-28 18:27:28
- gu
- Member
- Registered: 2020-08-27
- Posts: 59
Re: N00b Q. re. coding default page from zero
Thank you zero! I am also encouraged by the fact that your approach is the same as mine… (my argument to self being I am not trying to sell my services as designer but, if I can quote an IndieWeb ideal, designing as I go for my own purposes – and (hopefully!) leave a trail for others if they find it useful…)
I am currently having a problem which may be host-based, wherein my browser is no longer registering the changes I make. I hope I have not broken anything and am being careful with opening and closing commands… I have also tried a hard refresh as per Fabric Digital’s browser instructions.
It just occurred to me to ask (if I may ask you another question, sorry) whether I supposed to be practising somewhere else, and not ‘live’ on my actual site?
<!— space for hope —>
Offline
#11 2020-08-28 18:41:57
- gu
- Member
- Registered: 2020-08-27
- Posts: 59
Re: N00b Q. re. coding default page from zero
@zero … just saw your next message. My code does include some txp but only the basics as per the intro tutorial. I am being chatty now because I would like to reply but want to get back to work so won’t edit: tl;dr =thanks for your support! & I continue to be a n00b :)
_____
When I looked at the txp page, it seemed mostly geared towards search functions over design functions – but the former is why I am interested in it. I will look at it again now.
FWIW, my dream page (but I really want to try to learn this on my own as much as I can) = logo, name, search box aligned (some of that in what I made yesterday had txp in that)
two columns of categories (I have the txp for that) [I chose two columns understanding that this would be best to simplify display on multiple devices, as I am not prepared in falling completely down that rabbit hole at this time!]
a boolean for a static part on home page only
then articles (with more boolean) beneath it
- meaning, for every page, you are always encouraged to look at other pages…
The txp already took care of much of that!!! All I had left was to fix the search bar in place and to add the static part to the home page… (well, also to centre my footer, but that is not a top priority).
Sadly I accidentally lost yesterday’s work but actually that is good because if you can’t recreate it, you didn’t learn it.
- OK, back to work!
(Thank you so much for your support, it really means a lot – and, no, there is no such thing as too much info for the [dare I say it] autodidact approach – so thanks for everything, cheers.)
Last edited by gu (2020-08-28 18:42:19)
<!— space for hope —>
Offline
Re: N00b Q. re. coding default page from zero
Ask away — no problem! Browsers can be a pain at refreshing the page. I’ve been finding Firefox to be very sticky and refusing to update unless I close it down, despite clearing the cache. If you can have two or three browsers available it helps.
I always used my live sites at first for practicing — because who would be looking besides me? I used to make a copy of a page and work on that, then replace the original when I thought it was good enough. But before long you will want to install a LAMP stack, a XAMPP stack or a MAMP stack. These are development platforms on your home computer, for Linux, Windows or Mac. They basically set you up with a website on your own local computer. You work on that and then basically copy the database over to your remote site when you are ready to go live. If you want to install one of these, look around for some good step-by-step instructions for the installation, sorry I can’t recommend anything.
Offline