Author

Topic: CONTEST: design loyce.club home page (Read 2218 times)

bitmover

legendary

Activity: 2352

Merit: 6089

bitcoindata.science

Quote from: LoyceV on June 12, 2021, 10:01:06 AM

Quote from: FatFork on June 11, 2021, 03:20:33 PM

If you like, I can put together a lightweight template based on the current design that will be easier for you to implement since it will only contain the bare-bones CSS code. Starting from scratch is sometimes more efficient than trying to remove unnecessary bits from the existing code.

Do you mean you'll copy all used items from addresses.loyce.club/css/all.css? Or start from scratch?
I appreciate the offer

There are some websites that do that automatically (removed unused css) However, some functionality may break while doing so. But I think it is worth trying

This one I have used a few times
https://purifycss.online/

Just enter your url and you will receive a "clean " css with all unused css removed.

As I said some functionality (for example, some hover components) may break. But it is possible that nothing will happen, as the design is simple.

Fatfork idea is good because he will create a new template with simple css (if I understood correctly)

LoyceV

legendary

Activity: 3290

Merit: 16489

Thick-Skinned Gang Leader and Golden Feather 2021

Quote from: FatFork on June 11, 2021, 03:20:33 PM

Do you mean you'll copy all used items from addresses.loyce.club/css/all.css? Or start from scratch?
I appreciate the offer

FatFork

legendary

Activity: 1820

Merit: 2700

Crypto Swap Exchange

Quote from: LoyceV on June 09, 2021, 08:13:30 AM

... Ideally, I'd like to strip most of the unused stuff out, a much smaller file is easier to use.

bL4nkcode

copper member

Activity: 2142

Merit: 1305

Limited in number. Limitless in potential.

Quote from: LoyceV on June 10, 2021, 06:21:28 AM

Quote from: jamyr on June 09, 2021, 05:47:23 PM

Sorry what exactly is the inspiration of this logo?

You'll have to ask bL4nkcode, he got me the logo.

Nothing special, I just made reference a blockchain network style and bitcoin Grin

.

Fun fact I was a long haired/ponytail haired guy when I created that back then. Cheesy

LoyceV

legendary

Activity: 3290

Merit: 16489

Thick-Skinned Gang Leader and Golden Feather 2021

Quote from: bitmover on June 09, 2021, 10:01:17 AM

I wouldn't mind, but I don't really have the time. And I'm just really not good at designing anything graphical (apart from the code part).

Quote from: jamyr on June 09, 2021, 05:47:23 PM

Sorry what exactly is the inspiration of this logo?

You'll have to ask bL4nkcode, he got me the logo.

jamyr

sr. member

Activity: 1848

Merit: 373

<------

Quote from: LoyceV on June 09, 2021, 08:13:30 AM

~
However, with all the above tips, I managed to add a design to addresses.loyce.club:
~

While I'm staring at this I imagine a very happy man walking in this direction <--
with a ponytailed hair.

Sorry what exactly is the inspiration of this logo?

bitmover

legendary

Activity: 2352

Merit: 6089

bitcoindata.science

Quote from: LoyceV on June 09, 2021, 08:13:30 AM

Somehow I always end up procrastinating updating the design. I like data much more than graphical stuff.
However, with all the above tips, I managed to add a design to addresses.loyce.club:

Congrats! I know how it is hard to work with someone else's code, specially when you are learning a new language.! Well done!

Quote

Unfortunately, some of the other links on top aren't working at the moment (cheap servers tend to disappear after a while). Long-term, I want to add this design to loyce.club's main page too. But first, I should get a bit more comfortable with the CSS. It still feels like I don't really know what I'm doing with CSS, so this took quite some time. Ideally, I'd like to strip most of the unused stuff out, a much smaller file is easier to use.

If you wnat to learn CSS, i think it will be fast and easier if you take a look at this css framework https://getbootstrap.com/
It is an amazing framework, used everywhere. It is simple to use and will save you a lot of time coding (your current design uses a few bootstrap elements)

I managed to fix your footer, which was not displaying correctly

in the begining of your page, add the class pb-0 (which means padding-bottom:0) in your div:

Code:

Then, you should move your footer section tag outside of the container div (The Container class is what make that horizontal padding/margins around your page, centering it. Your footer and your navbar should not be inside it.)

Code:



page content
...

something like this.

This is the image with the full code

LoyceV

legendary

Activity: 3290

Merit: 16489

Thick-Skinned Gang Leader and Golden Feather 2021

Somehow I always end up procrastinating updating the design. I like data much more than graphical stuff.
However, with all the above tips, I managed to add a design to addresses.loyce.club:
Image loading...

And (very imporant of course) addresses.loyce.club/donations.html
Image loading...

bitmover

legendary

Activity: 2352

Merit: 6089

bitcoindata.science

Quote from: LoyceV on February 04, 2021, 07:32:58 AM

This has the same problem: there is white space between the lines.

The problem is that the font is smaller than the line-height (87% of line-height).
just add this to solve.

Code:

code
{    padding: .2em .4em;
    margin: 0;
    background-color: rgb(243 244 244);
    border-radius: 6px;
font-size: 100%;
}

If you want a big retangle with a background you will have add a background atribute to the DIV which contain the code tags (similar to FatFork solution).
like this:

Look for this div tag, whicih contain the code tags, and add bg-light to its class. You can see other predefined colors here:

Code:


Sample:

...




I think FatFork solution to use  instead of  is good, but you will lose semantics. The ideal would b e style the  tag as you want. Not a big deal anyway...




    
        
            
                FatFork            
            legendary
            
                                                                                                            
            Activity: 1820
            Merit: 2700
            
                                                                
            Crypto Swap Exchange
            
                            
        
        
            
                
                                    
                
                    
                                                Re: CONTEST: design loyce.club home page                    
                    February 04, 2021, 07:49:21 AM
                
                
                    #74                
            
            
                Quote from: LoyceV on February 04, 2021, 07:32:58 AM
Quote from: FatFork on January 27, 2021, 07:15:23 PM
Maybe change the color from black to dark gray like the font color. On your example:
Code:
code {
  font-size: 87.5%;
  color: #888888;
  word-break: break-word;
  border: 1px solid #888888;
}
This adds a border around every line, while I want/need a border around the entire code tags. See this page.

The simplest solution:
- put a dot in front of the code tag in your CSS file so that it becomes a selector
for example:
Code:
.code {
    font-size: 87.5%;
    color: #888888;
    word-break: break-word;
    border: 1px solid #888888;
}
- add code selector to the parent 'div' tag in your HTML (where you want the border to apply)
for example:
Code:


EDIT:
On your example, I would recommend adding a margin on the left and right. So, within the CSS .code selector, add this line as well:
Code:
margin: 0 0.50rem !important;

EDIT 2:
If you want to use the style suggested by bitmover, instead of border, add background-color and border-radius:
Code:
background-color: rgb(243 244 244);
border-radius: 6px;
            
                    
    



    
        
            
                LoyceV            
            legendary
            
                                                                                                            
            Activity: 3290
            Merit: 16489
            
                                                                
            Thick-Skinned Gang Leader and Golden Feather 2021
            
                            
        
        
            
                
                                    
                
                    
                                                Re: CONTEST: design loyce.club home page                    
                    February 04, 2021, 07:32:58 AM
                
                
                    #73                
            
            
                Quote from: FatFork on January 27, 2021, 07:15:23 PM
Code:
@media (min-width: 992px) {
  .xBlank {
    padding-top: calc(4rem + 104px);
    padding-bottom: 17rem;
  }
Thanks, this worked!

Quote from: bitmover on January 27, 2021, 10:23:09 PM
You can try this, github code tag style, which is very common:
Code:
code
{    padding: .2em .4em;
    margin: 0;
    background-color: rgb(243 244 244);
    border-radius: 6px;
}
This has the same problem: there is white space between the lines.

Quote
I think you should go to a full minimalist page or a beautiful responsive page with a 100-200kb css file like the one you are working on. It is hard to have a beautiful responsive layout with a 10kb css file...
I don't mind the file size, but it makes it so much harder to find which part causes something.            
                    
    



    
        
            
                bitmover            
            legendary
            
                                                                                                            
            Activity: 2352
            Merit: 6089
            
                                                                
            bitcoindata.science
            
                            
        
        
            
                
                                    
                
                    
                                                Re: CONTEST: design loyce.club home page                    
                    January 27, 2021, 10:23:09 PM
                
                
                    #72                
            
            
                Quote from: LoyceV on January 27, 2021, 04:41:30 PM
Ideally, there should be a rectangle or something around the code tags. The forum makes code tags very obvious that way.

You can try this, github code tag style, which is very common:

Code:
code
{    padding: .2em .4em;
    margin: 0;
    background-color: rgb(243 244 244);
    border-radius: 6px;
}




You can also try   and  tags. They are all related to coding and have pre formatted styles already.
But I think github style is what you are looking for.

Quote from: LoyceV on January 27, 2021, 04:41:30 PM
It feels like the 183 kB all.css is far too advanced for what I'm using it for.

Yeah, it kind of is. Probably because of the use of media queries for responsive design but I bet you also have a bunch of selectors that you will never even use.

There isn't much you can do. To use this layout you will need to use this css file... You can try to remove some of it, but it is not that simple (it may break some responsive stuff, or some events like some hovers,dropdown, etc).

An alternative would be to use an open web standard such as bootstrap, which would be easier to code, but it wouldn't work with this layout and the file size would be almost the same.

I think you should go to a full minimalist page or a beautiful responsive page with a 100-200kb css file like the one you are working on. It is hard to have a beautiful responsive layout with a 10kb css file...




    
        
            
                FatFork            
            legendary
            
                                                                                                            
            Activity: 1820
            Merit: 2700
            
                                                                
            Crypto Swap Exchange
            
                            
        
        
            
                
                                    
                
                    
                                                Re: CONTEST: design loyce.club home page                    
                    January 27, 2021, 07:15:23 PM
                
                
                    #71                
            
            
                Quote from: LoyceV on January 27, 2021, 04:41:30 PM
I don't think this changed anything, see this test version.

This is because you have multiple instances of .xBlank class selectors in your CSS. Your CSS uses media queries to apply different styles for different media types/devices (responsive web design).
If you want to remove (reduce) vertical white space in the desktop view you need to find the following code in CSS (it should be around line 9745):

Code:
@media (min-width: 992px) {
  .xBlank {
    padding-top: calc(4rem + 104px);
    padding-bottom: 17rem;
  }

Just change the padding-bottom value and check the result.

Quote from: LoyceV on January 27, 2021, 04:41:30 PM
Ideally, there should be a rectangle or something around the code tags. The forum makes code tags very obvious that way.

Add this line within the code tag CSS selector:
Code:
border: 1px solid #000000;

Maybe change the color from black to dark gray like the font color. On your example:
Code:
code {
  font-size: 87.5%;
  color: #888888;
  word-break: break-word;
  border: 1px solid #888888;
}

Quote from: LoyceV on January 27, 2021, 04:41:30 PM
It feels like the 183 kB all.css is far too advanced for what I'm using it for.

Yeah, it kind of is. Probably because of the use of media queries for responsive design but I bet you also have a bunch of selectors that you will never even use.

            
                    
    



    
        
            
                LoyceV            
            legendary
            
                                                                                                            
            Activity: 3290
            Merit: 16489
            
                                                                
            Thick-Skinned Gang Leader and Golden Feather 2021
            
                            
        
        
            
                
                                    
                
                    
                                                Re: CONTEST: design loyce.club home page                    
                    January 27, 2021, 04:41:30 PM
                
                
                    #70                
            
            
                Quote from: bitmover on January 26, 2021, 03:54:17 PM
Go to your http://addresses.loyce.club/css/all.css file

You will find this:
Code:
.xBlank {
  padding-top: calc(4rem + 74px);
  padding-bottom: 11rem;
}

Delete it, and add this:

Code:
.xBlank {
  padding-top: calc(2rem + 74px);
padding-bottom: 2rem;}

This will fix the vertical white space.
I don't think this changed anything, see this test version.

Quote
About code tags, you just need to add   where you want to look like code.
~
and add in your Css for different colors for balance and address, if you want:
Thanks, that was easy. I don't need different colors, so I changed it to this: 
Code:
code {
  font-size: 87.5%;
  color: #888888;
  word-break: break-word;
}
Ideally, there should be a rectangle or something around the code tags. The forum makes code tags very obvious that way.

Quote
If you want to get completely rid of vetrtical space, delete the "xBlank" class from this DIV, in the HTML:
Code:

I tried removing it, but that makes it too crowded.
On the left side of this page, I've played around with this:
Code:
That lead to too much vertical white space, so I've also changed this (it was 1.25rem;):
Code:
.card-body {
  flex: 1 1 auto;
  padding: 0.50rem;
}
It feels like the 183 kB all.css is far too advanced for what I'm using it for.            
                    
    



    
        
            
                bitmover            
            legendary
            
                                                                                                            
            Activity: 2352
            Merit: 6089
            
                                                                
            bitcoindata.science
            
                            
        
        
            
                
                                    
                
                    
                                                Re: CONTEST: design loyce.club home page                    
                    January 26, 2021, 03:54:17 PM
                
                
                    #69                
            
            
                Quote from: LoyceV on January 24, 2021, 02:30:17 PM
But I'm kinda stuck: total CSS-n00b here. What I'd like to do is add some better formatting, kinda like the forum's code-tags for instance, a bit less vertical white space, and some headers. But again: total CSS-n00b here 

Well, let me try. 

Go to your http://addresses.loyce.club/css/all.css file

You will find this:
Code:
.xBlank {
  padding-top: calc(4rem + 74px);
  padding-bottom: 11rem;
}

Delete it, and add this:

Code:
.xBlank {
  padding-top: calc(2rem + 74px);
padding-bottom: 2rem;}

This will fix the vertical white space.



About code tags, you just need to add   where you want to look like code.

 35hK24tcLEWcgNA4JxpvbkNkoAcDGqQPsP, like this, right?

Just add

Code:
35hK24tcLEWcgNA4JxpvbkNkoAcDGqQPsP  
 25550215765875


        3KZ526NxCVXbKwwP66RgM3pte6zW4gY1tD
      10185724750535

and add in your Css for different colors for balance and address, if you want:
Code:
code.balance {
    color: #17324d!important;
}


You will see this effect. I think it is what you said.




If you want to get completely rid of vetrtical space, delete the "xBlank" class from this DIV, in the HTML:
Code:

            
                    
    



    
        
            
                LoyceV            
            legendary
            
                                                                                                            
            Activity: 3290
            Merit: 16489
            
                                                                
            Thick-Skinned Gang Leader and Golden Feather 2021
            
                            
        
        
            
                
                                    
                
                    
                                                Re: CONTEST: design loyce.club home page                    
                    January 24, 2021, 02:30:17 PM
                
                
                    #68                
            
            
                Quote from: bL4nkcode on December 18, 2019, 12:30:03 PM
Made a simple responsive layout for the website. Thanks to bootstrap 4, fontAwesome, jquery. Made a very simple logo btw 

Here's how it looks


Sauce:
https://github.com/blankcodes/loycev.club
So.... it took me only slightly more than a year to get to use this. I'm going to add it first to my List of all Bitcoin addresses with a balance. It currently looks like a list of file names, and I want it to look a bit like this.
But I'm kinda stuck: total CSS-n00b here. What I'd like to do is add some better formatting, kinda like the forum's code-tags for instance, a bit less vertical white space, and some headers. But again: total CSS-n00b here 

I choose my Bitcoin data instead of my Bitcointalk data because this are only a few pages:
Quote from: LoyceV on June 11, 2020, 10:30:34 AM
Bitcoin block data available in CSV format
List of all Bitcoin addresses with a balance
List of all Bitcoin addresses ever used
[~500 GB] Bitcoin block data: inputs, outputs and transactions
My Bitcointalk data has about 6 million pages and is slightly more work.

I've added you to the footer. I should probably not do that to all 6 million pages (if I ever have the time), but this is like the least I can do.            
                    
    



    
        
            
                LoyceV            
            legendary
            
                                                                                                            
            Activity: 3290
            Merit: 16489
            
                                                                
            Thick-Skinned Gang Leader and Golden Feather 2021
            
                            
        
        
            
                
                                    
                
                    
                                                Re: CONTEST: design loyce.club home page                    
                    December 11, 2020, 12:19:28 PM
                
                
                    #67                
            
            
                I'll explain why I didn't continue adding a design yet: I was waiting to first update my "oldposts" into lists per user and per topic. Unfortunately, I messed up a few times, including shutting down the wrong PC, so I had to start over. It takes quite a lot of resources, and at the current rate I expect this to finish in about 3 weeks (unless I mess up again).

Meanwhile: keep the code coming             
                    
    



    
        
            
                Maus0728            
            legendary
            
                                                                                                            
            Activity: 1904
            Merit: 1563
            
                            
            
            
                            
        
        
            
                
                                    
                
                    
                                                Re: CONTEST: design loyce.club home page                    
                    December 11, 2020, 12:09:30 PM
                
                
                    #66                
            
            
                Just a little suggestions with bitmover's search tool^[1], it is a good practice to limit the possible entries of the user's input. In example, I can search for negative numbers and it will return nothing of course. But it is a good practice in UX to maintain inputs with less unnecessary options. To restrict the negative input in the form control, you can just simply add its minimum value. 

Code:

This would then limit the possible input from the user, restricting the unnecessary negative numbers. It can also be used to have the lowest possible result, like: 12 is the lowest UID, 6 is the lowest number TopicID, while 28 still remains the lowest value possible and undeleted post for mssgID (since using less than 28 would just redirects the user to the overall summary). Code to be edited are as follows:

Code:
//MESSAGEID INPUT


//TOPICID INPUT


//USERID INPUT


[1] - loyce.club/archive/members/


This is my only suggestion but I might return on to this thread once I have more knowledge on coding.            
                    
    



    
        
            
                suchmoon            
            legendary
            
                                                                                                            
            Activity: 3654
            Merit: 8909
            
                                                                
            https://bpip.org
            
                            
        
        
            
                
                                    
                
                    
                                                Re: CONTEST: design loyce.club home page                    
                    December 11, 2020, 11:46:43 AM
                
                
                    #65                
            
            
                Quote from: bitmover on December 11, 2020, 11:30:43 AM
I am removing the last four digits, no matter the size 

I think the message ID parser takes the first 4, which won't work past 100 million.            
                    
    



    
        
            
                bitmover            
            legendary
            
                                                                                                            
            Activity: 2352
            Merit: 6089
            
                                                                
            bitcoindata.science
            
                            
        
        
            
                
                                    
                
                    
                                                Re: CONTEST: design loyce.club home page                    
                    December 11, 2020, 11:30:43 AM
                
                
                    #64                
            
            
                Quote from: suchmoon on December 11, 2020, 11:05:52 AM
Shorter cleaner code less prone to failure - will work for any length, or at least while LoyceV keeps 10k files per folder. Might be faster but in this case I don't think it matters much.

Granted right now what you have works fine so no real need to change until we get to 100 million posts 

Your solution  indeed looks cleaner.

But I didnt understand why would this bug with a bigger length 

Code:
var topfolder = top.substring(0, top.length-4);

I am removing the last four digits, no matter the size